Bootstrap ComboboxWe had need of a combobox at work and after looking around at the available options I was not happy with any of them. The project had all it's styling based on Twitter's Bootstrap, so building on that made sense.
How to install itYou can install this plugin one of two ways.
Previously, this was the only way to install the plugin. You will need two files included in your HTML in order for this to work:
- Manual download
This plugin is now in bower! If you've already installed bower on your machine, simply use the command:
- Bower install
bower install bootstrap-combobox
This will install the plugin to your bowercomponents folder. For more information please see http://bower.io/
Then just activate the plugin on a normal select box(suggest having a blank option first):
OptionsWhen activating the plugin, you may include an object containing options for the combobox
menu: Custom markup for the dropdown menu list element.
item: Custom markup for the dropdown menu list items.
matcher: Custom function with one
itemargument that compares the item to the input. Defaults to matching on the query being a substring of the item, case insenstive
sorter: Custom function that sorts a list
itemsfor display in the dropdown
highlighter: Custom function for highlighting an
item. Defaults to bolding the query within a matched item
template: Custom function that returns markup for the combobox.
bsVersion: Version of bootstrap being used. This is used by the default
templatefunction to generate markup correctly. Defaults to '3'. Set to '2' for compatibility with Bootstrap 2
appendId: The desired id of the transformed combobox. This will become the id attr and can be mapped to a label using the for attribute. Useful for accessibility.