jQuery.combobox is a plugin which takes a standard HTML-element <select> and turns it into a (not in HTML existing) combobox-element. It is easy to install and style using CSS.
A combobox is a commonly-used graphical user interface widget. It is a combination of a drop-down list or list box and a single-line textbox, allowing the user to either type a value directly into the control or choose from the list of existing options.
Comboboxes are typically applied to provide autocomplete functionality in a convenient way to the user.
A combobox with standard configuration.
A combobox without button.
A combobox with modified button and a callbackSelectOption function.
Include the jQuery library, the combobox plugin and the combobox stylesheet inside the <head> tag of the page:
<link rel="stylesheet" type="text/css" media="all" href="css/combobox.css" /> <script language="javascript" type="text/javascript" src="js/jquery.js"></script> <script language="javascript" type="text/javascript" src="js/jquery.combobox.js"></script>
Create a standard HTML <select>-element.
<select name="foo" id="foo" tabindex="2"> <option value="a" class="class_of_option">abcde</option> <option value="b">bcdef</option> <option value="c">cdefg</option> <option value="d">defgh</option> <option value="e">efghi</option> <option value="f">fghij</option> <option value="g">ghijk</option> <option value="h">hijkl</option> <option value="i">ijklm</option> </select>
Add the following code inside the <head> tag of the page:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#foo').combobox({
// Configuration goes here
});
});
</script>
After the combobox plugin has been initialised, the fully created markup in the DOM looks like this:
<div class="combobox_container" id="combobox_container_foo"> <input class="combobox_input" value="abcde" type="text" tabindex="2" autocomplete="off" /> <input class="combobox_hidden" name="foo" id="foo" value="a" type="hidden" /> <a href="#" class="combobox_button"><span>></span></a> <ul style="display: none;" class="combobox_summary"> <li class="class_of_option"><a href="a">abcde</a></li> <li><a href="b">bcdef</a></li> <li><a href="c">cdefg</a></li> <li><a href="d">defgh</a></li> <li><a href="e">efghi</a></li> <li><a href="f">fghij</a></li> <li><a href="g">ghijk</a></li> <li><a href="h">hijkl</a></li> <li><a href="i">ijklm</a></li> </ul> </div>
A list of the options to set (showing default settings):
combobox.defaults = {
showOnMouseOver: false,
hideOnMouseOut: false,
autoComplete: true,
maxVisibleOptions: 1000000,
buttonText: '>',
buttonToggle: true,
callbackShowOptions: function(arr) {},
callbackSelectOption: function(val) {}
};
showOnMouseOver Boolean
Specifies wether the options are shown onmouseover or not (else they will be show onclick).
hideOnMoseOut Boolean
Specifies wether the options are hidden onmouseout or not.
autoComplete Boolean
Specifies wether the corresponding options are shown while typing (onkeydown) or not.
maxVisibleOptions Number
Specifies the amount of options visible before the scrollbar will be activated.
buttonText String
The text on the button, if empty the button will not be generated (for example when using showOnMouseOver: true).
buttonToggle String
Specifies wether the options are hidden on a second onclick or not.
callbackShowOptions(arr) Function
Function that is called after the options that are shown change (when typing or opening the options using the button). An array containing the shown options will be passed as parameter.
callbackSelectOption(val) Function
Function that is calles after an option is selected from the list. The selected option (as string) will be passed as parameter.
The jQuery.combobox plugin is licensed under the MIT license.