jquery UI Combobox ONCHANGE

Question

how can I attach an onchange function in a jqueryUI combobox? Here is my code:

$(".cmbBox").combobox({
     change:function(){
         alert($(this).val());
     }
});

When the value changes, it will alert the updated value.

Any help please.. :)

Answer 1

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/

Answer 2

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!"); 
        } 
    }
);

Answer 3

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
});

Answer 4

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

);

Answer 5

simplest way (IMHO), if you are deploying combobox as widget:

1. find "_create" method in widget

2. inside of it look for "autocomplete" (where input is managed)

3. add (use) "select" method to get your data: ui.item.value

(function($){
$.widget( "ui.combobox", {
    // default options
    options: {
    //your options ....
    },
    _create: function() {

    //some code ....

    //this is input you look for
    input = $( "" )
    .appendTo( wrapper )
    .val( value )
    .addClass( "ui-state-default" )

    //this is autocomplete you look for
    .autocomplete({
        delay: 0,
        minLength: 0,
        source: function( request, response ) {
        //some code ...
        },

        //this is select method you look for ...
        select: function( event, ui ) {

        //this is your selected value
        console.log(ui.item.value);
        },
        change: function( event, ui ) {

        //some code ...
        }
    })
    //rest of code
    },

    destroy: function() {
    this.wrapper.remove();
    this.element.show();
    $.Widget.prototype.destroy.call( this );
    }
});

Answer 6

In fact, there's already a "hook" for the onchange event.

Just change the following line for the method call or the callback that you want:

autocompletechange: "_removeIfInvalid"

Answer 7

It says in the "Events" section of the documentation, that you handle a change like this...

$( ".selector" ).autocomplete({
   change: function(event, ui) { ... }
});

Answer 8

This seems to work for me

if('function' == typeof(callback = ui.item.option.parentElement.onchange))
                        callback.apply(this, []);

just before

self._trigger("selected", event, {