Jquery custom select/combobox

Question

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 ablity to enter a custom value. Most combobox solutions, I have been looking at are malfunctioning one way or the other. What are alternative solutions in this case?

I have tried simpleCombo plugin, and most solutions here: http://stackoverflow.com/questions/195270/professional-jquery-based-combobox-control — Mr Hyde, Oct 21 '10 at 18:35
In fact simple combo comes closest to the functionality I want; but its broken; — Mr Hyde, Oct 21 '10 at 19:18

score 2 · Accepted Answer · answered Oct 21 '10 at 18:32

2

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.

answered Oct 21 '10 at 18:32

Sarfraz

377,238
77
533
578

It needs another field to set a value; Space is really restricted, however i will put in that as an option; – Mr Hyde Oct 21 '10 at 18:37
Regret earlier comment, I was wrong. Fits my app very well. You CAN type directly into the select box field. – Mr Hyde Oct 21 '10 at 19:29
Please update the link as it no longer works – johnstaveley Oct 13 '21 at 07:56

score 1 · Answer 2 · answered Oct 21 '10 at 18:33

1

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:

QuickSelect

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

answered Oct 21 '10 at 18:33

Adam

43,763
16
104
144

Um, tried this now. But populated options in my select box are numericals, so autocomplete like functionality is almost useless. It would have worked if there was a option to show dropdown irrespective of input match. Thanks – Mr Hyde Oct 21 '10 at 19:16

score 0 · Answer 3 · edited May 23 '17 at 12:08

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

<select id="combo4" style="width: 200px;"
            onchange="$('input#text4').val($(this).val());">
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
</select>
<input id="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.

One approach I used using Jquery UI autocomplete => http://stackoverflow.com/questions/4776754/jquery-autocomplete-search-method/4777238#4777238 — Mr Hyde, Apr 11 '11 at 18:20

Jquery custom select/combobox

3 Answers3

Linked