Question

我在网页上有一个文本框，允许用户输入要搜索的文本。我有一个下拉菜单，显示用户搜索的一些建议。文本框的autocomplete属性设置为off。原因是浏览器的自动填充下拉列表与我创建的下拉列表冲突。浏览器的自动完成设置用于向用户建议用户之前搜索过的内容。

现在我已关闭自动完成功能并自定义下拉并提供建议，我想访问浏览器存储的术语列表以显示其自己的自动完成功能。

基本上我想在我的自定义下拉列表中添加以前搜索过的字词以及我的建议。有人可以告诉我如何在启用自动填充功能时访问浏览器建议的以前搜索过的字词列表

我的代码如下

<form method="get" action="${ctx.contextPath}/search" autocomplete="off"
  class="search-form">
<input id="searchField" type="text" class="search-field" name="dq"
       placeholder="${content.placeholder!}"
       onclick=showSearchTerms();
       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"/>
<ul id="popularSearchListDropDown" class="dropdown-menu" aria-labelledby="searchField">
    <li class="dropdown-header">Most Common Search Terms</li>
    [#list popularSearchTerms as term]
        <li class="dropdown-item">
            <a href="${ctx.contextPath}/search?q=${term}">${term}</a>
        </li>
    [/#list]
</ul>
<button id="search-go" class="submit-search" type="submit">
[#include "/images/icon-search.png"]
</button>
</form>

Answer 1

有人可以告诉我如何在启用自动填充功能时访问浏览器建议的以前搜索过的字词列表

不可能。对于脚本来说，访问用户的自动填充字段历史记录是一个非常大的安全漏洞。

Answer 2

嗨Nirmalya Guha Khasnobis，

您可以尝试依赖＆＃34; ui-select＆＃34;。 https://angular-ui.github.io/ui-select/

示例：HTML

  <ui-select theme="bootstrap" class="inputColor" name="customer" ng-model="customer">
        <ui-select-match placeholder="Customer...">{{$select.selected.fullName}}</ui-select-match>
        <ui-select-choices repeat="customer in customerList | filter: $select.search">
          <div ng-bind-html="customer.fullName | highlight: $select.search"></div>

        </ui-select-choices>
      </ui-select>

示例：JS

   $scope.customerList = [{id: 1, fullName: "CUSTOMER1"}, 
{id:2, fullName: "CUSTOMER2"},{id:3, fullName: "CUSTOMER3"}];

从浏览器访问自动填充列表以查找搜索框

2 个答案: