twitter-bootstrap – 在Twitter的Bootstrap Button下拉列表中添

Typeahead is removed in 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() );
        });


    $('.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的Bootstrap 2.3.2.

请参阅：http://bootply.com/66573.使用预先输入功能(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>