Simple Combo
by Bennett McElwee

The simpleCombo plugin is a jQuery-based combo box widget that is

• simple
• lightweight
• consistent with native widget look and feel

with simpleCombo, you can turn select lists into combo boxes like this:

$(selector).simpleCombo();

Simple combo boxes are normal select lists with one extra feature: you can type directly into the combo box to add an extra option, which is automatically selected.

Since these combo boxes are actually just select lists plus JavaScript, they look exactly like regular select lists. They can be styled, resized, etc. with no visual glitches.

Example

Add combo box functionality to all select lists with the "allow-edit" class.

$('select.allow-edit').simpleCombo();

Demo

You can play around with the Simple Combo demo.

Limitations

• This won't work on most touch screen devices, because they won't display a keyboard when a select list is selected.
• On Safari, characters cannot be entered when the combo is expanded.
• Only regular ascii characters can be entered: no accented letters or non-Latin characters.

License

This work is licensed under the Creative Commons Attribution 3.0 Unported License. Permissions beyond the scope of this license can be requested from the author.

Download

You can download this project in either zip or tar formats.

You can also clone the project with Git by running:

$ git clone git://github.com/bennettmcelwee/Simple-Combo

Contact

Bennett McElwee (bennett at thunderguy com, @bnnt, thunderguy.com/semicolon)

Tweet Follow @bnnt