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

Question

我有一个搜索框，它使用 jqueryUI .autocomplete 通过 AJAX 获取数据以提供建议。问题在于，当用户在自动完成 AJAX 对源的调用完成之前按回车键时，警告框中会弹出一个错误。 "AJAX Error 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

如果您按回车键，浏览器会默认提交表单。虽然 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
        }

    },
    // ...
});

Answer 2

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

你只需要这个属性

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

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

这里正在工作example

ajax 来源的另一个示例。但它已经提到至少我们需要等待 ajax 请求应该完成并且 return 有结果。

这是另一个 example 来源ajax。

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

jQueryUI Autocomplete Returning AJAX Error 0 when user hits enter

javascript

ajax

jquery

jquery-ui