Add a search box to the Button Bootstrap Button drop-down list to select items

Question

Original question from @ maha-raja :

"How can I enable the Twitter Bootstrap button dropdown search?

I am using the download button dropdown on my webpage. Since the list contains more than 20 items, I select the scroll option. Now I need a way to enable the search and quickly select an item. "

Answer 1

Bootstrap 3

Typeahead is removed in Bootstrap 3 , so use http://github.com/twitter/typeahead.js instead. Example: 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'); } }); 

Remember 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 Bootstrap 2.3.2.

See: http://bootply.com/66573 . Use the typeahead function ( http://twitter.imtqy.com/bootstrap/2.3.2/javascript.html#typeahead ) to select an item from the drop-down list:

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>