Customised jQuery autocomplete

I have a customised jQuery autocomplete control that is declared something like this.

$('#SystemCode_Autocomplete').autocomplete({
    source: [{"label":"Access","value":0},{"label":"Documentum","value":0}], //move values
    minLength: 1,
    change: function(event, ui) {// some function},
    select: function(event, ui) {// some function}
});

The change and select events are custom. The problem is if I type something into the textbox then click the submit button (i.e. no tab out, or lost of focus), or if I press the key to submit after typing into the text box, the change event isn't fired and it has to be before I submit.

I was hoping to do it without putting javascript behind the submit button, and to ideally do it from within the autocomplete control itself. I tried adding the change to the blur event.

${'foo').blur(function() { $('bar').trigger('autocompletechange');
// or
${'foo').blur(function() { $('bar').change();

But none of them have worked, anyone have any ideas?

Edit Report

Ok I completely for to update this to what we actually did to get it to work. Basically we editted the autocomplete .js file to get it to do want we wanted. Specifically we added our own options to the autocomplete then we editted the _response method to something like this

_response: function (content) {
        if (content.length) {
            content = this._normalize(content);
            this._suggest(content);
            this._trigger("open");

            this.options.isInError = false;
            this.element.removeClass("input-validation-error");
        } else {
            this.close();

            if (this.element.val() == '') {
                this.options.hiddenField.val('');
            } else {
                this.options.hiddenField.val('-1');
            }
            if (this.options.mustBeInList) {
                this.options.isInError = true;
                this.element.addClass('input-validation-error');
            }
        }
        this.element.removeClass("ui-autocomplete-loading");
    },

That way we know if the User is entering "rubbish" as they type and the controll goes red and into an "error"mode. To stop them from posting back we do this

case keyCode.ENTER:
                case keyCode.NUMPAD_ENTER:
                    // when menu is open or has focus

                    if (self.options.isInError == true) {
                        return false;
                    }

                    if (self.menu.element.is(":visible")) {
                        event.preventDefault();
                    }
                    //passthrough - ENTER and TAB both select the current element
                case keyCode.TAB:
                    if (!self.menu.active) {
                        return;
                    }
                    self.menu.select(event);
                    break;

answered 2010-12-15T12:30:09.540

Customised jQuery autocomplete

1 Answer

Your Answer