在 Twitter 的 Bootstrap Button 下拉列表中添加搜索框以选择项目 [英] Add search box in Twitter's Bootstrap Button dropdown list to select the items
问题描述
来自 @maha-raja 的原始问题:
在 Twitter Bootstrap 按钮下拉列表中启用搜索的方法有哪些?
我在我的网页中使用引导按钮下拉列表.由于列表包含 20 多个项目，我选择了滚动选项.现在我需要一种方法来启用搜索并快速选择项目."
Bootstrap 3
Typeahead 在 Bootstrap 3 中被移除，所以改用 http://github.com/twitter/typeahead.js.示例:http://bootply.com/69994
Javascript:
var items = new Array();$( ".dropdown-menu li a.hc" ).each(function( index ) {items.push( $(this).text() );});$('.下拉菜单输入').click(function(){return false;});//防止菜单隐藏$('.typeahead').typeahead({name: '物品',本地:物品}).on('typeahead:selected', function(obj, datum) {if($('a.hc').filter(function(index) { return $(this).text() === datum.value; })){//alert('重定向到:' + $('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');}});不要忘记包含 typeahead.js 和一些额外的 css(参见:http://github.com/twitter/typeahead.js)
HTML:
<div class="btn-group"><button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle">Inverse <span class="caret"></span></button><ul class="下拉菜单"><li><input type="text" class="typeahead"></li><li><a class="hc" href="#">Action</a></li><li><a class="hc" href="#">另一个动作</a></li><li><a class="hc" href="#">这里还有别的东西</a></li><li class="divider"></li><li><a class="hc" href="http://www.stackoverflow.com/">Stackoverflow.com</a></li>Twitter 的 Bootstrap 2.3.2.
请参阅:http://bootply.com/66573.使用 typeahead 功能(http://twitter.github.io/bootstrap/2.3.2/javascript.html#typeahead) 从下拉列表中选择一个项目:
Javascript:
函数 getitems(){var 数组 = 新数组()；$( ".dropdown-menu li a.hc" ).each(function( index ) {array.push( $(this).text() );});返回数组；}$('.下拉菜单输入').click(function(){return false;});//防止菜单隐藏$('.typeahead').typeahead({来源:getitems，更新程序:功能(项目){if($('a.hc').filter(function(index) { return $(this).text() === item; })){alert('重定向到:' + $('a.hc').filter(function(index) { return $(this).text() === item; }).attr('href'));window.location = $('a.hc').filter(function(index) { return $(this).text() === item; }).attr('href');}归还物品;}});HTML:
<div class="btn-group"><button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle">Inverse <span class="caret"></span></button><ul class="下拉菜单"><li><input type="text" class="typeahead"></li><li><a class="hc" href="#">Action</a></li><li><a class="hc" href="#">另一个动作</a></li><li><a class="hc" href="#">这里还有别的东西</a></li><li class="divider"></li><li><a class="hc" href="http://www.stackoverflow.com/">Stackoverflow.com</a></li>Original question from @maha-raja:
"What are the ways to enable search in Twitter Bootstrap button drop-down list?
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."
Bootstrap 3
Typeahead is removed in Bootstrap 3 so instead use http://github.com/twitter/typeahead.js. Example on: http://bootply.com/69994
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)
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.
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:
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:
<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 的 Bootstrap Button 下拉列表中添加搜索框以选择项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
