Adverts

Archives By Subject

Calendar

Mon Tue Wed Thu Fri Sat Sun
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            

Search

RSS


Tags

adobe apache book review cfimage coldfusion google google chrome hosting iis internet explorer java javascript jquery lucene photoshop regex ses urls software review sql injection svn trac

Subscribe

Enter your email address to subscribe to this blog.

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:

<link rel="Stylesheet" type="text/css" href="/css/ui-lightness/jquery-ui-1.8.2.custom.css" />
   <InvalidTag type="text/javascript" src="/scripts/jquery-1.4.2.min.js"></script>
   <InvalidTag type="text/javascript" src="/scripts/jquery-ui-1.8.2.custom.min.js"></script>
   <InvalidTag 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:

<select name="greeknumber" 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.

Update August 2012

On a current client's project, I've been using a jQuery plugin called Chosen by the clever folks at Harvest.

It does the same job of turning SELECTs into comboboxes, but adds a few extra features including a more user friendly version of the multi select.

Comments
Emery's Gravatar Hi,
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
# Posted By Emery | 26/08/10 16:13
Gareth's Gravatar Hi 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
# Posted By Gareth | 26/08/10 16:23
vimal's Gravatar Thank you for the script, really good.. But if i want to create a function on click and display the results in a table
# Posted By vimal | 19/11/10 07:03
Gareth's Gravatar Hi Vimal,

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
# Posted By Gareth | 19/11/10 12:00
vimal's Gravatar i've tried to put a button, when post , it generates a query and display on the table. php.. i fnk an onclick function wud do better.

Anyway i wish to have all the records displayed on the combox while viewing the list.. how can it be done?.

Thx
Regards
vimal
# Posted By vimal | 23/11/10 14:15
Gareth's Gravatar Hi Vimal,

Can you post a code example please?
I'm not sure what you're trying to do.

Thanks
# Posted By Gareth | 23/11/10 16:03
Mike's Gravatar Hi Gareth,

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
# Posted By Mike | 15/03/11 20:53
Gareth's Gravatar Hi 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
# Posted By Gareth | 15/03/11 22:26
Ken's Gravatar I been trying this in IE8 for the last hour, it doesn't work at all :(
# Posted By Ken | 29/06/11 22:04
Gareth's Gravatar Hi Ken,

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.
# Posted By Gareth | 30/06/11 14:55
Soon's Gravatar onChange in the select doesn't work after using class=combobox. What can I do to make it work?
# Posted By Soon | 03/08/11 17:12
Gareth's Gravatar Hi Soon,

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.
# Posted By Gareth | 04/08/11 14:31
Shuaib's Gravatar Thanks for the great work. I added to my site and made small CSS changes to the cobobox.js file and everything started working.
# Posted By Shuaib | 06/10/11 21:43
Brian's Gravatar I've been playing with your control, and noticed a bug. Not sure if it's something to do with how I'm using it. When I start typing and the option list shows up, if I use the arrow keys to go between them, it displays the value instead of the label.

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.
# Posted By Brian | 01/02/12 21:43
Gareth's Gravatar Hi Brian,

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
# Posted By Gareth | 02/02/12 15:45
Oliver Doepner's Gravatar The reason for the value (and not the label text) showing up in the text field is just the regular auto-complete behavior (as per "Overview" section of http://jqueryui.com/demos/autocomplete):
"The local data can be a simple Array of Strings, or it contains Objects for each item in the array, with either a label or value property or both. The label property is displayed in the suggestion menu. The value will be inserted into the input element after the user selected something from the menu."
But of course, for a combo-box scenario where labels are different from value we don't want this.

I solved this by providing only a "label" (and not a "value") property in the options array that serves as the auto-complete source.
I still use a "val" property for the purpose of the combo-box code, but the JQuery UI auto-complete code ignores that (since it is not named "value"):

// process select options into an array
var opts = new Array();
$('option', select).each(function(index) {
var opt = new Object();
opt.val = $(this).val(); // not "opt.value" !!!
opt.label = $(this).text();
opts[opts.length] = opt;
});

You also need to adjust all references to opt.value (and change them to opt.val).
# Posted By Oliver Doepner | 20/02/12 23:05
Manuel B's Gravatar Thanks man, this script is awesome, just what I needed!
# Posted By Manuel B | 21/05/12 17:40
Oliver Doepner's Gravatar I have posted a further enhanced version of combobox.js here: http://odoepner.wordpress.com/2012/07/11/autocompl...

I fixed the "value instead of label displayed when up/down keys are used" bug and used separate _init() and _create() functions to allow "refreshing" a combobox via repeated combobox() calls, for example when the options have been changed by a JQuery load() call (AJAX).
# Posted By Oliver Doepner | 13/07/12 02:37
ritesh's Gravatar if i have multiple dropdown on a page and I have to set the id of each dropdown for further use then how to apply for each drop down
# Posted By ritesh | 26/08/12 09:35
kitt's Gravatar Chosen the best! thx
# Posted By kitt | 23/12/12 16:55
ibrahim's Gravatar Hello,

it is great work.. But i want to use this for only match from beginning.

How can i achive these? i search too much but got nothing.

Thank you very much.
# Posted By ibrahim | 14/04/13 02:09
ibrahim's Gravatar i share the sollution for only match from beginning autocomplete;

source: function(req, responseFn) {
                  var re = $.ui.autocomplete.escapeRegex(req.term);
                  var matcher = new RegExp( "^" + re, "i" );
                  var a = $.grep( opts, function(item,index){
                     if(matcher.test(opts[index].label)){
                        return opts[index];
                     }
                  });
                  responseFn( a );
               }
# Posted By ibrahim | 14/04/13 09:55
Adobe Certified Professional - Macromedia ColdFusion MX 7 Advanced Developer Powered By ColdFusion 8 aggregated by mxna aggregated by coldfusionBloggers