twitter-bootstrap 在 Twitter 的 Bootstrap Button 下拉列表中添加搜索框以选择项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17907275/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add search box in Twitter's Bootstrap Button dropdown list to select the items
提问by Bass Jobsen
Original question from @maha-raja:
来自@maha-raja 的原始问题：
"What are the ways to enable search in Twitter Bootstrap button drop-down list?
“在 Twitter Bootstrap 按钮下拉列表中启用搜索的方法有哪些？
I am using bootstrap button drop-down list in my webpage. As the list contains more than 20 items I go for a scroll option. Now I need a way to enable search and select the item quickly."
我在我的网页中使用引导按钮下拉列表。由于列表包含 20 多个项目，我选择了滚动选项。现在我需要一种方法来启用搜索并快速选择项目。”
回答by Bass Jobsen
Bootstrap 3
引导程序 3
Typeahead is removed in Bootstrap 3so instead use http://github.com/twitter/typeahead.js. Example on: http://bootply.com/69994
在 Bootstrap 3 中删除了 Typeahead，所以改用http://github.com/twitter/typeahead.js。示例：http: //bootply.com/69994
Javascript:
Javascript：
var items = new Array();
$( ".dropdown-menu li a.hc" ).each(function( index ) {
items.push( $(this).text() );
});
$('.dropdown-menu input').click(function(){return false;}); //prevent menu hide
$('.typeahead').typeahead(
{
name: 'items',
local: items
}
).on('typeahead:selected', function(obj, datum) {
if($('a.hc').filter(function(index) { return $(this).text() === datum.value; }))
{
//alert('redirect to: ' + $('a.hc').filter(function(index) { return $(this).text() === datum.value; }).attr('href'));
window.location = $('a.hc').filter(function(index) { return $(this).text() === datum.value; }).attr('href');
}
});
Do not forget to include typeahead.js and some additional css (see: http://github.com/twitter/typeahead.js)
不要忘记包含 typeahead.js 和一些额外的 css（参见：http: //github.com/twitter/typeahead.js）
HTML:
HTML：
<div class="container">
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle">Inverse <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><input type="text" class="typeahead"></li>
<li><a class="hc" href="#">Action</a></li>
<li><a class="hc" href="#">Another action</a></li>
<li><a class="hc" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a class="hc" href="http://www.stackoverflow.com/">Stackoverflow.com</a></li>
</ul>
</div>
</div>
Twitter's Bootstrap 2.3.2.
Twitter 的 Bootstrap 2.3.2。
See: http://bootply.com/66573. Use the typeahead function (http://twitter.github.io/bootstrap/2.3.2/javascript.html#typeahead) to select a item from the dropdown:
请参阅：http: //bootply.com/66573。使用 typeahead 函数（http://twitter.github.io/bootstrap/2.3.2/javascript.html#typeahead）从下拉列表中选择一个项目：
Javascript:
Javascript：
function getitems()
{
var array = new Array();
$( ".dropdown-menu li a.hc" ).each(function( index ) {
array.push( $(this).text() );
});
return array;
}
$('.dropdown-menu input').click(function(){return false;}); //prevent menu hide
$('.typeahead').typeahead(
{
source: getitems,
updater: function(item){
if($('a.hc').filter(function(index) { return $(this).text() === item; }))
{
alert('redirect to: ' + $('a.hc').filter(function(index) { return $(this).text() === item; }).attr('href'));
window.location = $('a.hc').filter(function(index) { return $(this).text() === item; }).attr('href');
}
return item;}
}
);
HTML:
HTML：
<div class="container">
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle">Inverse <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><input type="text" class="typeahead"></li>
<li><a class="hc" href="#">Action</a></li>
<li><a class="hc" href="#">Another action</a></li>
<li><a class="hc" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a class="hc" href="http://www.stackoverflow.com/">Stackoverflow.com</a></li>
</ul>
</div>
</div>
