HTML输入自动完成/建议[关闭]答案

【问题标题】：HTML input autocomplete/suggestion [closed]HTML输入自动完成/建议[关闭]
【发布时间】：2013-04-04 15:35:44
【问题描述】：

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

例如在phpPgAdmin中：

【问题讨论】：

这只是为了得到一个正确的答案。搜索插件或开始创建一些东西，然后就更具体的编码问题寻求帮助。
谷歌搜索“jquery ajax autosuggest php”把我带到这里：papermashup.com/jquery-php-ajax-autosuggest
你所要求的听起来像一个下拉列表，为什么不简单地创建一个下拉列表并用你的 sql 数据库中的数据填充它
w3schools.com/ajax/ajax_aspphp.asp 选中此作为开始。
试一试并提出问题。你为此做了什么？

【解决方案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>

【讨论】：

这是您最好的选择。花哨的样式等可能是用一些 JS 完成的 - 但除非你真的准备好深入研究出现的跨浏览器问题（使用垫片、奇怪的表单样式相关的东西、在显示 div 时管理真正的选择选项对应于隐藏在页面中的选择等），KISS，只需使用此处给出的示例。 <?php $options = get_options(); echo "<select>"; foreach($options as $key => $val){ echo "<option value='{$key}'>{$val}</option>"; } ?>ta-da！

【解决方案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>

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

【讨论】：

【解决方案3】：

最好的插件或最容易弄清楚的是

http://jqueryui.com/autocomplete/

我认为这对于我们使用 php 作为后端的用例来说应该足够了，并且还有多个自定义选项。

【讨论】：

【解决方案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

【讨论】：