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.
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">
And then is ready:
You can type and search for any option:
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>
Implemented here:
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----
And it works like this:
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.