Add search box in Twitter's Bootstrap Button dropdown list to select the items

Question

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."

Answer 1

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>