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

你可以使用datalists：

<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 ）。

这是他们使用的一个例子。