jQueryUI Autocomplete Returning AJAX Ошибка 0, когда пользователь нажимает ввод

Question

У меня есть окно поиска, которое использует jqueryUI .autocomplete для получения данных через AJAX, чтобы давать предложения. Проблема в том, что когда пользователь нажимает клавишу ввода до того, как выполняется автозаполнение вызова AJAX к источнику, в окне предупреждения появляется сообщение об ошибке. «Ошибка AJAX 0»

Я предполагаю, что когда пользователь нажимает «Enter», когда в окне поиска браузер автоматически останавливает вызов AJAX, что приводит к неправильному ответу AJAX, который вызывает jqueryui для выдачи ошибки. Есть ли способ, чтобы этого не произошло? Вот пример кода автозаполнения:

    $("#searchBar_searchAll").on("keydown", function(event) {
        if (event.keyCode === $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active ) {
            event.preventDefault();
        }
    }).autocomplete({
        source: function(request, response) {
            $.getJSON('<?php echo CController::createUrl("inventory/searchAutocomplete"); ?>', {
                searchString: extractLast(request.term),
                searchScopeRecord: $("#searchScope_recordScope option:selected").val(),
                searchScopeActive: $("#searchScope_activeScope option:selected").val(),
                searchOptions: $("#searchBar_searchoption_searchAll option:selected").val()
            }, response);
        },
        search: function() {
            var searchString = extractLast(this.value);
            if (searchString.length < 3)
                return false;
        },
        focus: function() {
            return false;
        },
        select: function(event, ui) {
            window.location.href = '<?php echo CController::createUrl("inventory/update"); ?>' + '&id=' + ui.item.value;

            return false;
        }
    });

Редактировать: проблема возникает иногда только при дальнейшем тестировании, и кажется, что это происходит почти каждый раз на медленной машине. Кажется, это связано с тем, насколько быстро машина выполняет Javascript.

Кажется, что ошибка AJAX 0 возникает, потому что, когда пользователь отправляет запрос на поиск, он отменяет запрос AJAX. Кажется, что когда это отменено, jauery-ui .autocomplete, вероятно, вызывает всплывающее окно с ошибкой из-за отсутствия данных. Могу ли я в любом случае отменить запрос AJAX, когда кто-нибудь нажмет Enter или кнопку отправки, чтобы такая ошибка AJAX не возникала?

Answer 1

Привет, я думаю, вы ищете функцию поиска ввода.

вам просто нужно это свойство

$("#searchBar_searchAll").autocomplete({ autoFocus: true });

У меня не было вашего php api-кода, поэтому я поставил образец массива источникадля моего автозаполнения.

здесь работает пример

другой пример с источником ajax. но, как уже упоминалось, по крайней мере, нам нужно подождать, пока запрос ajax завершится и вернется с результатами.

вот еще один пример с источником ajax.

Answer 2

Браузер отправляет форму по умолчанию, если вы нажмете Enter. В то время как ajax-запросу требуется время (если оно не доставлено из кеша браузера), браузер-форма-отправка запускается немедленно и прерывает ваш запущенный ajax-запрос. В результате вы видите ошибку AJAX.

Возможно, вы можете установить вспомогательную переменную, если нажмете Enter и пропустите JSON-функцию, если эта переменная верна.

var bEnterPressed = false;

$("#searchBar_searchAll").on("keydown", function(event) {
    var iKey = event.keyCode || event.which; // event.which is for old IE compatibility

    bEnterPressed = false;

    if (event.keyCode === $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active ) {
        event.preventDefault();
    }

    // Detect Enter = key 37
    if( iKey === 37 ) {
        bEnterPressed = true;
    }

}).autocomplete({
    source: function(request, response) {
        if( bEnterPressed ) { return false; } // skip ajax-request, if Enter was pressed

        try {
            $.getJSON('<?php echo CController::createUrl("inventory/searchAutocomplete"); ?>', {
                searchString: extractLast(request.term),
                searchScopeRecord: $("#searchScope_recordScope option:selected").val(),
                searchScopeActive: $("#searchScope_activeScope option:selected").val(),
                searchOptions: $("#searchBar_searchoption_searchAll option:selected").val()
            }, response);
        } catch(e) {
            // ignore ajax-errors
        }

    },
    // ...
});