从浏览器访问搜索框的自动完成列表

Question

我在网页上有一个文本框，允许用户键入要搜索的文本。 我有一个下拉菜单，其中显示了一些用户可以搜索的建议。 文本框的自动完成属性设置为关闭。 原因是浏览器的自动完成下拉菜单与我创建的下拉菜单冲突。 浏览器的自动完成设置用于向用户建议用户以前搜索过的内容。

现在，我已经关闭了自动完成功能，并自定义了一个带有建议的下拉列表，我想访问浏览器存储的术语列表，以显示其自身的自动完成功能。

基本上，我想在自定义下拉列表中添加以前搜索过的字词以及建议。 有人可以让我知道在打开自动完成功能后如何访问浏览器建议的术语列表吗？

我的代码如下

<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，

您可以尝试依赖项“ ui-select”。 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"}];