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.

[More]

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