Simple Combo Box jQuery plugin

Thursday, 16 July 2009

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: ,

28 comments

You can leave a comment, or trackback from your own site.

  1. Having issues with it working with the latest version of jQuery (1.5.1). I tried the same code with the 1.3 version on the Google CDN and it works.

  2. I am running jquery 1.3.2 and this thing works like a charm. It was exactly what I was looking for.
    I am going to modify it alittle to maybe change the option’s color when text is typed in, maybe a variable location on the typed in field… I will try to send you the modified js file once i am done.

    Thank you!

  3. Thanks @Ron, I’ll be interested to see what you come up with!

  4. How to make the existing select items editable with this plugin?

  5. To fix the blank value attribute of the new typed item you can add:

    typingArea.attr(‘value’,text);

    on line 84, just after this line:

    typingArea.text(text);

    That will make the value attribute always match the text of that option element. Thanks for the handy plugin!!

  6. It looks as if there was a change introduced in jQuery 1.5 that broke the plugin. I will fix this shortly.

  7. I just realized this as well, so I have to stick with 1.4.4 until this fix is ready. Any idea when you will be able to troubleshoot this?

    I would try myself, but I am new to jQuery, so the chances of me figuring it out are slim. I did look at the release notes for 1.5, but I didn’t see anything that seemed to relate to the features you are using in your code.

    Thanks for a simple, great plugin!

  8. I’ve just updated the plugin to address this and other lingering considerations.

Leave a comment