Turn SELECTs into Comboboxes with jQuery UI Autocomplete

This entry is about a script I've written using jQuery, that turns ordinary html select elements into comboboxes. You don't need to re-write any of your code, and users without JavaScript will still have fully functioning select boxes.

I've been working on a project on and off for over a year now, and it is huge! I've lost track of the number of pages and forms that have been developed for it.

The end is finally in sight, but a recent request has been to use Comboboxes for selecting users. Currently, the forms use plain old html SELECT tags, and personally I think they're great. I find them very fast to use, and most browsers will filter them if you start to type anyway. However, the client was very insistent on this feature, so I've had to put them in.

As html doesn't have comboboxes, a JavaScript solution was the only option. I had two big requirements though:

1. The JavaScript must progressively enhance the html - it must still work for users without JS.
2. I didn't want to spend hours re-working the many forms where this was needed - I didn't want to have to change the back-end processing, I didn't want to set up remote ajax calls for each form and I wanted to minimise front-end html changes.

I'm still fairly new at jquery, but it's been great so far. I hadn't used Jquery UI before, but the autocomplete feature seemed ideal. In particular, this example seemed to be very close to what I wanted.

It soon became obvious that the example hadn't been used in the real world before. If the select was inside a form (a fairly normal occurence), then the form would be submitted as soon as the combobox button was clicked. There were also problems with the select not being updated until focus was lost. Several hours of bug fixing and modifications later, I came up with combobox.js

To use this, you first need to go to the jQuery UI site, and download the appropriate custom package. Make sure you use version 1.8 or higher, and it must include at least the autocomplete and button modules. Just follow the jQuery instructions for installing it on your page.

To install the Combobox functionality, you just need to link to the file after the jQuery file links in the head of your page, as shown in the example below:

Now comes the clever bit - any select tag can be turned into a combobox just by adding the class combobox:

That's it! Once you have jQuery and the script installed, you only need to add the class!

Feel free to use the script as you want. I've tested it on a few of the latest browsers, but not all, so please let me know if you find any bugs.