I have just released simpleCombo, a jQuery-based combo box widget that is
- simple
- lightweight
- consistent with native widget look and feel
You can try out some simpleCombo demos, and download simpleCombo from the simpleCombo project page at jquery.com. For more details, read on.
There are many combo box web page widgets out there, but almost all the ones I’ve seen have the same flaw: they render themselves by stitching together various other widgets like select lists, text inputs, divs and so on. The results can look very stylish, but they tend to look different to native widgets. For example, Dojo‘s Dijit suite of widgets look nice, but they look quite different to native widgets. If you have one Dijit combo box on your page then everything else has to be a Dijit widget; otherwise your page will look like a room full of mismatched furniture. And as much as I can appreciate an eclectic decorating style, I don’t think it works so well on a web page.
So, if you want to be consistent with native browser widgets then you’ll just have to use them. One jQuery combo box plugin (Native Combo Box) is implemented by putting a text input over the top of a select list. It has to sniff the browser type to position the text box correctly, and even then it’s not perfect: it looks great in IE but not so good in Firefox. I thought it would be a good idea to try just to use a plain select list, and add JavaScript to capture keystrokes and fake a text input that way. So jquery.simpleCombo was born.
I have done a fair amount of testing with my limited resources. The jquery.simpleCombo plugin has the “woffie” property (works on Firefox and Internet Explorer). It also works on WebKit browsers such as Chrome and Safari. On these browsers you can’t type into the combo box when the list is “dropped down” — you have to click it or press escape to make the list go away before you can type.
I have also put together a simpleCombo test suite using QUnit. It verifies that the plugin correctly manipulates the DOM when creating the combo box, but I’m not sure how to use it to test user interaction in a meaningful way. I will investigate testing options further when I have some spare time (cue hollow laughter).
After I wrote this, I discovered another plugin that uses the same idea. Editable Combobox is far, far more complex and has many options. It’s overkill for anything I need — it allows you to control the position of the edit item within the list, and also shows a blinking cursor on some browsers. In contrast, Simple Combo is so simple that it offers no configuration options at all. I drew inspiration here from Antoine de Saint-Exupéry, who said that perfection is attained not when no more can be added, but when no more can be removed.
As part of developing this plugin I discovered a bug in jQuery 1.3.2. The bug occurs because val() will select every matching option in a select list, even if it’s a single select list (as most are). When this happens the browser has to make its own mind up about which option should be selected. Guess what? Internet Explorer and Firefox and Safari have differing views on the matter. I had to include a workaround for this problem in the plugin, and I have submitted a patch to the jQuery team to fix it (Ticket 4878).
After all that reading, you’ll be keen to go to the simpleCombo project page to download it. Off you go then.
bug report: simpleCombo does not accept Chinese text
Thanks @Henry. That’s a limitation listed on the project page: “Only regular ascii characters can be entered: no accented letters or non-Latin characters.”
I have looked at how to make the plugin work with non-Latin characters, but I haven’t had time yet to test it properly. When I do I will release an updated version.
It does not work if the first option is a blank.
If the first option is a blank, entering a new value to the select box has not effect. That is, blank will be submitted instead of the new value.
Thank you.
Example:
This won’t work because the first option is already a blank.
<!–
Volvo
Saab
Mercedes
–>
@cmgui, I think that will happen if the first option has a blank
valueattribute. Actually, when using any sort of combo box it doesn’t make sense for the options to havevalueattributes. I will have to make that more clear in the notes.Thank you Bennett for the clarification.
Hi,
The only problem I have is that it’s not obvious that the text is editable, because the cursor doesn’t show up in the box. I don’t think my users will notice. Is there a way to make it more obvious that the user can type freeform into the box?
Thanks,
Marco
@marco, I don’t know a good way to change th plugin to show this. Perhaps the best way is to add text like “select or type” next to the combo box.
thanks this is nice. One issue that might be worth calling out is that the simpleCombo() method breaks if the class you assign your selects is named ‘simpleCombo’.
i.e.
html: <div id=”mySelect” class=”simpleCombo” >
js: $(‘select.simpleComboClass’).simpleCombo();
this had me pulling my hair out for a few. fiw, I’m a total JQ noob.
@Jonathan, I’m not sure if your example is exactly right, but your point is valid. If your select has a class of “simpleCombo” then simpleCombo will think it’s already enabled, so it won’t work. If I update the plugin I will change that class name to something less likely to be accidentally used.
What about ie6 z-index bug when Select control is always on top?
Dijit comboBox for example has no such problem since it does not use native select control.
@Andrey: The Simple Combo plugin uses a native select box, so it will be affected by the IE6 z-index bug. This bug can be fixed with the bgiframe plugin.
Of course you can use other solutions such as Dijit, but as I mentioned above, “Dojo’s Dijit suite of widgets look nice, but they look quite different to native widgets. If you have one Dijit combo box on your page then everything else has to be a Dijit widget; otherwise your page will look like a room full of mismatched furniture.”
A page with the properties, events, themes … would be nice
Pretty cool approach, but it doesn’t seem to support Ctrl+V to paste text.
@Karl, I’m not sure how to support clipboard operations. I will investigate and see if it can be done.
@marco : my way to make it more obvious that the user can type freeform into the box.
I add special class “vide” to empty option and this css :
select.simpleCombo option.vide:after {
content:”Saisir une valeur…”;
color: #aaa;
font-style: italic;
}
Thanks
Looking for something (a widget? — I’m not a programmer) that will provide a substitute or complement the Windows 7 “save-as” function.
I routinely save a number of documents (about 25 or 30 per set). Each of the documents in the set has a name unique from the others in the set and each set is stored in a separate sub-directory (one subdirectory per each of my clients).
With the exception of the sub-directory, the names of each of the documents within the sets are identical to the names of documents in the sets. Any suggestions?
In simpler terms, I am a Realtor and each transaction has 25 or 30 documents — documents are the same from transaction to transaction. I want to scan each document, and then save it with the same exact name (for the specific document) each time — just to a different client’s subdirectory on my hard drive. It would be much simpler if, in the “save-as” dialogue box I could simply select the appropriate document name from the list, while pointing it is a specific sub-directory.
Great plugin thanks.
The latest version of jQuery (1.4.4) seems to be breaking simple combo in webkit browsers, the textbox is still there, but inputting text becomes impossible.