Hooking event handlers to jQuery Autocomplete Combobox

Question

Hi All,

I would like some advice on how to set event handlers for the jQuery Autocomplete Combox: http://jqueryui.com/demos/autocomplete/#combobox.

Code examples from the jQuery doc are as per below:

// Supply a callback function to handle the select event as an init option.
$( ".selector" ).autocomplete({
   select: function(event, ui) { ... }
});
// Bind to the select event by type: autocompleteselect.
$( ".selector" ).bind( "autocompleteselect", function(event, ui) {
  ...
});

I have tried this - as per below - but it doesn't work. I understand from this closed bug report (dev.jqueryui.com/ticket/5891) that I am "instantiating a combobox and then trying to set options using autocomplete", but I don't understand how to fix it.

// Have: <select id="comboInput" name="comboInput"> ....
$(document).ready(function() {
   $("#comboInput").combobox();
   $("#comboInput").autocomplete({
      select: function(event, ui) {
         alert("Value selected.");
      }
   });
});

Can anyone advise me on how to make this work? Thanks for any assistance!

Rob :)

Answer 1

Hi All,

In short, this is what is needed to create a combobox with an event handler for the "selected" event (should be "select", but combobox is only a prototype):

<script language="javascript" type="text/javascript">
   $(document).ready(function() {
      // For some SELECT with ID combobox
      $("#combobox").combobox({
         selected: function(event, ui) {
            // Event handling code goes here.
         } // selected
      }); // combo
   }); // ready
</script>

For more detail and discussion, see my blog post: Event Handling with the jQuery Autocomplete Combobox.

Rob

:)