Subscribe

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.

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!

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/

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.

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:

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.

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.

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.

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"):

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).