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.

Update

Simple Combo is now on Github.

Tags: JavaScript, jQuery