Справка по автозаполнению JQuery

Question

У меня есть настроенный элемент управления автозаполнением 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();

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

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

Answer 2

Хорошо, я полностью обновляю это до того, что мы на самом деле сделали, чтобы заставить его работать. По сути, мы отредактировали файл автозаполнения .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;

Answer 3

• DEMO: http://ask.altervista.org/demo/jquery-autocomplete-help/

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

Answer 4

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

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

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

Answer 5

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

Перед перемещением фокуса на элемент (без выбора), 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);
        }
    });