Поддержка автозаполнения JQuery

У меня есть настраиваемый элемент автозаполнения JQuery, который объявлен как-то вроде этого.

$('#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}
});

Изменения и выбор событий являются обычными. Проблема заключается в том, что если я ввожу что-то в текстовое поле, то нажмите кнопку отправки (т.е. Нет закладки или потеря фокуса), или если я нажимаю клавишу для отправки после ввода в текстовое поле, событие изменения не запускается и это должно быть, прежде чем я отправлю.

Я надеялся сделать это, не помещая javascript за кнопку "Отправить", и, в идеале, делать это изнутри самого автозаполнения. Я попытался добавить изменение в событие размытия.

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

Но никто из них не работал, у кого есть идеи?

Ответы

Ответ 1

Вы можете попробовать что-то вроде этого:

$('#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 */}
}).each(function(){
    var self = $(this).closest("form").submit(function(e){
        self.trigger("change");

        // you may not need anything like this...but whatever
        if(!functionToCheckIfFormIsValid()){
            e.preventDefault();
        }
    });
});

Ответ 2

фокус функция автозаполнения

Прежде чем фокус перемещается в элемент (не выбирая), ui.item относится к сфокусированному элементу. Действие фокуса по умолчанию заключается в замене значения текстового поля на значение сфокусированного элемента, хотя только если событие фокуса было вызвано взаимодействием с клавиатурой. Отмена этого события предотвращает обновление значения, но не предотвращает фокусировку пункта меню.

Решите проблему:

    $('#SystemCode_Autocomplete').autocomplete({
        source: [{"label":"Access","value":0},{"label":"Documentum","value":0}], //move values
        minLength: 1,
        focus: function( event, ui ) {
            return false;
        },
        select: function(event, ui) {
            alert('Select Event:'+ui.item.value);
        }
    });

Ответ 3

Итак, ваша проблема в том, что вы должны убедиться, что действие a происходит до действия b, и у вас возникли проблемы с согласованием между двумя обработчиками событий? Это действительно похоже на довольно распространенную проблему с пользовательским интерфейсом, а не на то, что ограничено jQuery.

Как бы вы решили это в любых других обстоятельствах? Что делать, если я предложил вам использовать объект jQuery data для присоединения к элементу, а затем выполнить некоторую проверку семафора в каждом методе, например, установить флаг в одном методе, а в другом методе проверки, установлен ли флаг?

Как бы я это сделал, это я.

Ответ 4

$(function() {
var json = [{"label":"Access","value":0},{"label":"Documentum","value":0}];
$('#SystemCode_Autocomplete').autocomplete({
    source: function( request, responce ) {
        responce( $.map( json, function( item ) {
            return { id: item.value, label: item.label, value: item.label }
        }));
        $.each( json, function( i, item ) {
            if ( request.term.toLowerCase() == item.label.toLowerCase() ) { 
                   // do something here, ex.: AJAX call or form submit...
                $('#submit_button').click();
            }
        });   
    },
    minLength: 1,
    change: function(event, ui) { /*alert(ui.item.label + ' ' + ui.item.id)*/ },
    select: function(event, ui) {}
   });
});

Ответ 5

Хорошо, я полностью обновил это до того, что мы на самом деле сделали, чтобы заставить его работать. В основном мы редактировали файл autocomplete .js, чтобы заставить его делать то, что мы хотели. В частности, мы добавили наши собственные параметры в автозаполнение, затем мы изменили метод _response на что-то вроде этого

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

Таким образом, мы знаем, что пользователь вводит "мусор" по мере их ввода, а элемент управления - красный и переходит в режим "ошибки". Чтобы остановить их от публикации, мы делаем это

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;