如何在浏览器的自动完成弹出窗口中添加字符串？

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>

datalist是从input元素中定义的。然后输入元素通过list属性链接到datalist，该属性将其链接到具有给定id的datalist。

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

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

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

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