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