4

来自@maha-raja 的原始问题：

“在 Twitter Bootstrap 按钮下拉列表中启用搜索的方法有哪些？

我在我的网页中使用引导按钮下拉列表。由于列表包含 20 多个项目，我选择滚动选项。现在我需要一种方法来启用搜索并快速选择项目。”

4

1 回答 1

8

引导程序 3

在 Bootstrap 3 中删除了 Typeahead，因此请改用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() );
        });


    $('.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');
                    }
                });

不要忘记包含 typeahead.js 和一些额外的 css（参见：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 的引导程序 2.3.2。

请参阅：http ://bootply.com/66573 。使用 typeahead 函数 ( http://twitter.github.io/bootstrap/2.3.2/javascript.html#typeahead ) 从下拉列表中选择一个项目：

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>
于 2013-07-28T10:29:46.353 回答