jquery UI Combobox ONCHANGE

The combobox example source is all right there in the example. I'd trigger the change event of the underlying select by modifying the source code like this (changing the select event handler inside autocomplete initialization inside the plugin):

/* Snip */select: function( event, ui ) {    ui.item.option.selected = true;    self._trigger( "selected", event, {        item: ui.item.option    });    select.trigger("change");                            },/* Snip */

and then define an event handler for the regular change event of the select:

$(".cmbBox").change(function() {    alert(this.value);});

Unfortunately this won't work exactly the same way as the normal select.change event: it will trigger even you select the same item from the combobox.

Try it out here: http://jsfiddle.net/andrewwhitaker/hAM9H/

IMHO, an even simpler way to detect the user has changed the combobox (without having to tweak the jQuery UI autocomplete combobox source code) is as follows; this works for me. It's repetitious if you've got lots of them, though surely there's a way to refactor. Thanks to all who have studied and explained this widget at length, here and elsewhere.

$("#theComboBox").combobox({         select: function (event, ui) {             alert("the select event has fired!");         }     });

Into the ui.combobox plugin :

i added at the end of the select method :

$(input).trigger("change", ui);

i added before the "var input ..." :

select.attr('inputId', select.attr('id') + '_input');

after, to have a functional onchange event... on ui.combobox i commented the change method and moved its code to the checkval method that extends ui.autocomplete :

$.extend( $.ui.autocomplete, {    checkVal: function (select) {            var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),                        valid = false;            $(select).children("option").each(function () {                if ($(this).text().match(matcher)) {                    this.selected = valid = true;                    return false;                }            });            if (!valid) {                // remove invalid value, as it didn't match anything                $(this).val("");                $(select).val("");                $(this).data("autocomplete").term = "";                $(this).data("autocomplete").close();            }        }});

and i coded the input change method as below :

var oCbo = ('#MyCbo').combobox();$('#' + oCbo.attr('inputId')).change(function () {    // from select event : check if value exists    if (arguments.length < 2) {        $.ui.autocomplete.checkVal.apply(this, [oCbo]);    }        // YOUR CODE HERE});