javascript - 如何将字符串添加到浏览器的自动完成弹出窗口？

Question

这是谷歌登录屏幕的样子：

你点击它，会弹出一个建议列表。

我想在我自己的网站上做类似的事情，用户可以点击输入，然后会弹出一个 javascript 填充的建议列表（或过去的搜索列表以及我的建议）。

我怎样才能使用javascript做到这一点？

Answer 1

您可以通过将 autocomplete=off 属性添加到输入字段来关闭本机自动完成功能，然后您可以实现自己的自动完成功能。您不能将项目添加到本机列表。

幸运的是，有一些库可以帮助您创建自己的自动完成功能。例如，请参阅http://jqueryui.com/autocomplete/ :)

Answer 2

您可以使用 HTML5<datalist>元素。

datalist 元素允许您指定要在自动完成下拉列表中出现的值列表：

<input type="text" placeholder="Type in here." list="mydatalist" />
<datalist id="mydatalist">
  <option value="Apple" />
  <option value="Orange" />
  <option value="Banana" />
  <option value="Pear" />
  <option value="Kiwi" />
  <option value="Grape" />
  <option value="Grapefruit" />
</datalist>

数据列表是从输入元素中单独定义的。然后输入元素通过list属性链接到数据列表，该属性将其链接到具有给定 id 的数据列表。

该<datalist>元素仅在 IE10、Firefox、Chrome 和 Opera 中受支持，并且不区分大小写（至少在 chrome 24 中）。下面的演示向您展示了如何通过 javascript 添加选项。

演示：http: //jsbin.com/ewixoq/1/edit

更新：对于不支持 HTML5<datalist>元素的旧浏览器，可以使用 jQuery datalist 插件。关联：

http://miketaylr.com/code/datalist.html