HTML输入自动完成/建议

Question

如何进行输入，以便当用户点击它时，它会显示输入可以采用的所有可能值？我可以使用php从我的数据库中获取值，但是为了显示下面的图像，我想我将不得不使用javascript？我该怎么办？

例如，在phpPgAdmin中：

Answer 1

HTML中的select标签怎么样？它创建了一个下拉菜单，其中包含可以从php脚本（从数据库中获取）加载的选项。 W3Schools就是一个例子：

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Answer 2

在html5中，您有一个新的表单输入：

<input id="color" list="suggests">
<datalist id="suggests">
    <option value="Black">
    <option value="Red">
    <option value="Green">
    <option value="Blue">
    <option value="White">
</datalist>

如果您的浏览器不支持此输入，您可以按照此处所述使用填充：http://css-tricks.com/relevant-dropdowns-polyfill-for-datalist/

Answer 3

最好的插件或最容易弄明白的是

http://jqueryui.com/autocomplete/

我认为这应该足以支持我们使用php作为后端的用例，并且还有多个自定义选项。

Answer 4

这可以通过Ajax

实现

步骤：

1. prepare database for such suggested values.
2. On key event run Ajax
3. Get Response of Ajax and show in list using ul li in HTML

例如

http://www.ajaxdaddy.com/demo-jquery-autocomplete.html