javascript - Bootstrap 3 - 文本输入下的下拉搜索结果

Question

我在 bootstrap 3 框架的导航栏中有一个文本输入。

<div class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Title</a>
    </div>
    <div class="navbar-collapse collapse">
      <div class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" placeholder="Search..." id="search" class="form-control" />
        </div>
        <a href="#" class="btn btn-success">Contact</a>
      </div>
    </div>
  </div>
</div>

这里是 jsfiddle:http://jsfiddle.net/KKm3M/1/

我的文本输入所做的是在按键时点击数据库以获取搜索结果。它工作正常，我测试了它，将结果扔到其他地方的临时 div。

现在我想让这些结果显示在文本输入下方的下拉菜单中。一旦从后端返回第一个结果，下拉菜单就会显示出来。尝试搜索片段但惨遭失败。我该怎么做？

Answer 1

你可以使用数据列表:

<label for="something">
    Input "Something": 
    <input id="something" list="somethingelse">
    <datalist id="somethingelse">
        <option value="Something"></option>
        <option value="Something Else"></option>
        <option value="Another One"></option>
        <option value="Alpha"></option>
        <option value="Bravo"></option>
        <option value="Charlie"></option>
        <option value="Delta"></option>
        <option value="Echo"></option>
        <option value="Foxtrot"></option>
        <option value="Gamma"></option>
    </datalist>
</label>

浏览器支持正在增长 ( caniuse )。

Here是它们的使用示例。