我在 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。
现在我想让这些结果显示在文本输入下方的下拉菜单中。一旦从后端返回第一个结果,下拉菜单就会显示出来。尝试搜索片段但惨遭失败。我该怎么做?
最佳答案
你可以使用数据列表:
<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是它们的使用示例。
关于javascript - Bootstrap 3 - 文本输入下的下拉搜索结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20638761/