Jquery ui Autocomplete Combobox - changed not firing

Question

I need help with JQuery UI Autocomplete Combobox. I cannot get the "CHANGED" event to fire no matter what. I have pulled together this widget from various examples.

I have a JSFiddle here for the current working example. I want it to "ALERT" me with the select ID that was changed (I have 4 of these widgets on one page on the site I am building).

I get no JS errors from the example, so what am I doing wrong? Thanks in advance

(function ($) {
    $.widget("custom.combobox", {

        _create: function () {
            this.wrapper = $("<span>")
                .addClass("custom-combobox")
                .insertAfter(this.element);
            this.element.hide();
            this._createAutocomplete();
            this._createShowAllButton();
        },

        _createAutocomplete: function () {
            var selected = this.element.children(":selected"),
                value = selected.val() ? selected.text() : "";

            this.input = $("<input>")
                .appendTo(this.wrapper)
                .val(value)
                .attr("title", "")
                .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
                .autocomplete({
                delay: 0,
                minLength: 0,
                source: $.proxy(this, "_source")
            })
                .tooltip({
                tooltipClass: "ui-state-highlight"
            })
                .on('mouseup', function () {
                $(this).select();
            });

            $(this).blur();

            this._on(this.input, {
                autocompleteselect: function (event, ui) {
                    ui.item.option.selected = true;
                    this._trigger("select", event, {
                        item: ui.item.option
                    });
                },

                autocompletechange: "_removeIfInvalid"
            });
        },

        _createShowAllButton: function () {
            var input = this.input,
                wasOpen = false;

            $("<a>")
                .attr("tabIndex", -1)
                .attr("title", "Show All Items")
                .tooltip()
                .appendTo(this.wrapper)
                .button({
                icons: {
                    primary: "ui-icon-triangle-1-s"
                },
                text: false
            })
                .removeClass("ui-corner-all")
                .addClass("custom-combobox-toggle ui-corner-right")
                .mousedown(function () {
                wasOpen = input.autocomplete("widget").is(":visible");
            })
                .click(function () {
                input.focus();
                input.blur();

                // Close if already visible
                if (wasOpen) {
                    return;
                };

                // Pass empty string as value to search for, displaying all results
                input.autocomplete("search", "");
            });
        },

        _source: function (request, response) {
            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
            response(this.element.children("option").map(function () {
                var text = $(this).text();
                if (this.value && (!request.term || matcher.test(text))) return {
                    label: text,
                    value: text,
                    option: this
                };
            }));
        },

        _removeIfInvalid: function (event, ui) {
            // Selected an item, nothing to do
            if (ui.item) {

                var selected = this.element;
                return;
            };

            // Search for a match (case-insensitive)
            var default_text = "";

            var value = this.input.val(),
                valueLowerCase = value.toLowerCase(),
                valid = false;

            this.element.children("option").each(function () {

                if ($(this).val() == "default") {
                    default_text = $(this).text();
                };

                if ($(this).text().toLowerCase() === valueLowerCase) {
                    this.selected = valid = true;
                    return false;
                };
            });

            // Found a match, nothing to do
            if (valid) {
                return;
            };

            // Remove invalid value
            this.input.val(default_text)
                .attr("title", value + " didn't match any item")
                .tooltip("open");

            this._delay(function () {
                this.input.tooltip("close").attr("title", "");
            }, 2500);
            this.input.data("ui-autocomplete").term = "";
        },

        _destroy: function () {
            this.wrapper.remove();
            this.element.show();
        },

        refresh: function () {
            selected = this.element.children(":selected");
            this.input.val(selected.text());
        },

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

        change: function (event, ui) {
            if (!ui.item) {
                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("");
                    input.data("autocomplete").term = "";
                    return false;
                };
            };
        }
    });
})(jQuery);

Answer 1

simpler way to detect the user has changed the combobox Try this:

$("#combobox").combobox({ 
    select: function (event, ui) { 
        alert(this.value);
    } 
});

Answer 2

Awesome and almost perfect! It seems the above statement does not initialise the combobox to default selected values. I got it working by doing this:

jQuery("#select_address").combobox({ 
    select: function (event, ui) { 
        alert(jQuery(this).attr('id'));
    } 
});
    jQuery("#select_address").val("default").combobox("refresh");