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:
- The JavaScript must progressively enhance the html - it must still work for users without JS.
- 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:
<script type="text/javascript" src="/scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/scripts/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="/scripts/combobox.js"></script>
Now comes the clever bit - any select tag can be turned into a combobox just by adding the class combobox:
<option value="1">Alpha</option>
<option value="2">Beta</option>
<option value="3">Gamma</option>
<option value="4">Delta</option>
</select>
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.
Thank you for this package! Is there anyway for the dropdown widget to refresh? In my code, the dropdown values are dependent on another value. If the value changes, the dropdown values should change (using ajax) as well but it does not seem to refresh in the dropdown. Any help is appreciated. Thanks!
Regards,
Emery
This script is really only designed to progressively enhance static SELECTs.
If the SELECT's options are dynamic, then you're probably better with one of the other examples here:
http://jqueryui.com/demos/autocomplete/
Hope this helps,
Gareth
I'm not sure how you would do that. Have you tried adding a custom event function to the original SELECT box?
I'm not sure if the normal events will fire on it when the combobox is changed. You might need to alter the script so that it forces events to fire on the original SELECT.
Hope this helps
Anyway i wish to have all the records displayed on the combox while viewing the list.. how can it be done?.
Thx
Regards
vimal
Can you post a code example please?
I'm not sure what you're trying to do.
Thanks
I am a jquery noob.
Found your script and it is almost exactly what I need with the following exception. I need to have two different versions of the script, one that works as designed (populates the select box with the users selection) and another that actually submits the form on selection.
I was able to hack my way to making the script submit the form by making the following change:
select: function(event, ui) {
select.val(ui.item.value);// update (hidden) select
$(this).val(ui.item.label);
return false;
},
CHANGED TO
select: function(event, ui) {
select.val(ui.item.value);// update (hidden) select
$(this).val(ui.item.label);
this.form.submit();
},
I tried creating a copy of the script called comboboxsubmit and changing the last function on the script to
// new code
$(function() {
$(".comboboxsubmit").combobox();
});
My header calls look like this:
<!-- jquery ui code -->
<link rel="stylesheet" href="jQuery/css/smoothness/jquery-ui-1.8.10.custom.css" />
<script type="text/javascript" src="jQuery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jQuery/js/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript" src="jQuery/combobox.js"></script>
<script type="text/javascript" src="jQuery/comboboxsubmit.js"></script>
<link rel="stylesheet" href="jQuery/development-bundle/demos/demos.css" />
<style>
.ui-button { margin-left: -1px; }
.ui-button-icon-only .ui-button-text { padding: 0em; }
.ui-autocomplete-input { font-size:13px; margin: 0; padding: 2px 2px 0 2px; }
</style>
<!-- end jquery ui code -->
The select boxes have been given a class of either combobox or comboboxsubmit. problem is select inputs with class combobox will submit the form. If I remove the link to comboboxsubmit then the selects with class combobox work as expected.
I have searched for a couple of days to try and understand how to make these two scripts work together with no luck. I'm sure there is an easy solution that I cannot grasp.
Appreciate your help. The plugin works great as advertised.
Thx
Mike
If you can email me, or post links to your comboboxsubmit.js code and the page calling it, I'll take a look.
Just checking, but I presume you've altered this link at the top:
$.widget("ui.combobox", {
and:
$(function() {
$(".combobox").combobox();
});
Any of these could cause the wrong SELECTs to submit the form.
Thanks
I've just checked IE8 using a virtual PC, and it seems to be working fine. Are you just having trouble with IE8, or other versions of IE too?
I've found IE to be a bit less forgiving with JS, and it will fail on code that's fine in other browsers. It's not the easiest to debug either. All I can suggest is wrapping your code in try-catch statements until you can get an error message out of it.
Hope this helps.
What are you trying to do with it? Are you adding javascript to the onChange attribute of the select box, or are you trying to define an event handler?
Either way, I'm not sure if the select will fire an event, as it's actually a separate element that's being changed.
eg Say I were doing a color picker and had <option value="1">maroon</option><option value="2">magenta</option><option value="3">green</option>. If I type ma, I see maroon and magenta show up. I press down and maroon is highlighted. But the text box shows 1 instead of maroon.
Someone else spotted that a few months ago and emailed me about it. I fixed it at the time, but never got around to updating this article.
Anyway, I've updated the file here now, so please try again and let me know if it works for you.
Thanks,
Gareth