如何创建可编辑的下拉列表？用AJAX

Question

我正在尝试使用'select'html标记创建一个下拉列表，但这会使输入框无法编辑。

  <select name="blabla" id="search_container">
    <option>blabla</option>
    ...
  </select>

所以我添加了一个前面的输入：

<input type=text value="" onkeyup="searchFilter()"> Search </input>

当用户在该框中输入任何内容时，searchFilter()将会触发，返回一组<option>，覆盖search_container。

但这会让界面看起来很糟糕，我在这里有两个水平框，但我确实看到很多网站只有一个框，当用户输入时，选项列表会下降，你只需选择一个。

感谢您的回复。

@update，该术语称为“自动完成”，我的问题已解决。谢谢大家

Answer 1

只需通过这个链接希望它有所帮助:-)
  Demo

A jQuery plugin which extends normal dropdown (select) elements to be searchable. 

Answer 2

如果我理解正确，您是否希望创建“自动填充”搜索框？

有很多选择（只需尝试谷歌搜索“javascript自动完成”）。

jQuery UI具有此功能http://jqueryui.com/demos/autocomplete/，可能是一个很好的起点。

Answer 3

我假设您正在谈论具有自动完成功能的组合框 - 允许输入的组合框提供了一个选项列表，如下所示：

或者这个：

这在纯JavaScript中实现起来非常复杂（尽管可能），通常使用第三方JavaScript框架来实现，它提供了开箱即用的功能。

您可以查看以下JavaScript框架：

Dojo

jQueryUI（可能需要插件）

ExtJS