jQueryUI 自动完成返回 AJAX 错误 0 当用户点击回车

Question

我有一个搜索框，它使用 jqueryUI .autocomplete 通过 AJAX 获取数据以提供建议。问题是，当用户在对源的自动完成 AJAX 调用完成之前按 Enter 键时，会在警告框中弹出错误。 “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 请求。似乎当取消此操作时，jquery-ui 的 .autocomplete 可能会由于没有数据而触发错误弹出窗口。无论如何我可以干净地取消 AJAX 请求，然后当有人点击输入或提交按钮时，这样的 AJAX 错误就不会发生？

Answer 1

您好，我想您正在寻找输入搜索功能。

你只需要这个属性

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

我没有你的 php api 代码，所以我为我的自动完成放置了一个示例数组源。

这里正在工作example

另一个使用 ajax 源的示例。但至少已经提到过，我们需要等待 ajax 请求完成并返回结果。

这是另一个带有 ajax 源的 example。

Answer 2

如果您按回车，浏览器默认提交表单。虽然 ajax-request 需要时间（如果没有从浏览器缓存传递），但是 browser-form-submit 会立即触发并中断正在运行的 ajax-request。结果你会看到那些 ajax 错误。

如果您按 Enter 键并跳过 JSON 函数（如果此 var 为真），也许您可​​以设置一个辅助变量。

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
        }

    },
    // ...
});