引导3 - 下拉式文本输入下的搜索结果

我在引导3框架内的导航栏中有一个文本输入。引导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。

现在我想让这些结果显示在文本输入下的下拉菜单中。从后端返回第一个结果后，应该立即显示下拉列表。试图寻找片段，但失败惨败。我怎样才能做到这一点？

来源

2013-12-17 gwaramadze

你在找什么是我想的自动完成。查看[http://twitter.github.io/typeahead.js/](http://twitter.github.io/typeahead.js/），一个用于自动完成的Twitter jQuery库 – cbayram

谢谢，但我还很远家。只包含typehead.js会使我的输入字段完全混乱，并使其对$（“＃search”）选择器无响应。也许有人可以帮我一个片段？ – gwaramadze

尝试先阅读文档，在[GitHub]上（https://github.com/twitter/typeahead.js）。这是解释如何开始。如果您仍然遇到麻烦，请发布新评论。 – aledpardo

你可以使用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）。

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

来源

2016-04-11 22:44:59

即使这不是我所需要的甚至是寻找的东西;我爱你如何在没有使用JS的情况下制作它。为你+1我的朋友。 – Paramone

引导3 - 下拉式文本输入下的搜索结果

回答

相关问题