The goal of Dropdown-Select is simple: merely to extend Bootstrap's dropdown plugin to include all (or at least most) of the functionalities of a <select> element.
Why do that? you may be asking yourself. Well, the answer is that, as useful and reliable as they are in forms and the such, select elements are also pretty much impervious to CSS styling (beyond what libraries/frameworks like Bootstrap have already done) or JavaScript manipulation. So it seemed like a good idea to try to add some functionality to Bootstap's dropdown plugin, to make it a suitable and more friendly (for developers, designers and users alike) replacement for good 'ol <select>.
In order to use it, you just need to add the script to your head file or (even better) just before closing the <body> tag.
<script src="js/dropdown-select.js"></script>
And then, you can instantiate Bootstrap dropdowns as you usually do, either via data attributes or via javascript. Just remember to add the class dropdown-select to the element defined as a dropdown:
<div class="dropdown dropdown-select">
Find the option you are looking for by typing the first couple of letters. The plugin will match it agains the options and highlight the correct one.
Pick one element of the dropdown to be the one selected by default. For this, you just need to add the "default" to the <a> with the desired value:
<ul class="dropdown-menu" id="testList" role="menu" aria-labelledby="dLabel"> <li role="presentation"><a role="menuitem" tabindex="-1" class="default" href="javascript:void(0)">Buenos Aires</a></li>
Define groups of options. For this you need to add the disabled and groupheader classes to the li that will serve as the title of the group:
<div class="dropdown dropdown-select">
<button type="button" class="btn form-control dropdown-toggle" data-toggle="dropdown">
<span class="display">Click me and type!</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="testList" role="menu" aria-labelledby="dLabel">
<li role="presentation" class="disabled groupheader"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Buenos Aires</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Europe</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Berlin</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Rome</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Lisbon</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Madrid</a></li>
</ul>
</div>
And you can even use it in forms and validate them, by adding the "required" class to the element:
<div class="dropdown dropdown-select required">
----Rest of the dropdown code here----
This plugin works on the same browsers as Bootstrap, mayor cross-browser issues with it.
Please, use it, fork it or report any bug that you may find.