Jquery Custom Select/combobox

I am using jQuery; I have a select box the options of which are populated from a json object. But because the database is potentially incomplete, I would like to offer the user the

Solution 1:

You can use the jQuery Editable Combobox plugin for that.

jQuery Editable Combobox is a jQuery function that allows you to transform any tag into editable combobox.

This is done by adding a new element to carry the value entered by the keyboard. This will only work on select elements. Any other elements this function will be applied to will be ignored.

Solution 2:

Maybe an auto-complete box? Where the user can start typing and your options are presented, but a different value can be typed in as well. Like:

The QuickSelect plug-in can change your <select> box into one of these. http://github.com/dcparker/jquery_plugins/tree/master/quickselect

Solution 3:

The solutions on Professional jQuery based Combobox control? all focus on using the input as a means to filtering and autocompleting to an existing select value.

The main problem I see with "jQuery Editable Combobox" is that it remains a select list, and it is not obvious at all that you can just start typing something new.

If you're looking for the traditional combo box, which is simply "Type something or select from these pre-defined values" (no we won't hide the ones that don't match while you're typing), all you may need to do is

<selectid="combo4"style="width: 200px;"onchange="$('input#text4').val($(this).val());"><option>option 1</option><option>option 2</option><option>option 3</option></select><inputid="text4"style="margin-left: -203px; width: 180px; height: 1.2em; border: 0;" />

See http://bit.wisestamp.com/uncategorized/htmljquery-editable-combo-2/

Should be easy to wrap this into a plugin that converts an existing select tag, though I haven't seen that done yet.