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

Posted 2023-05-08

【中文标题】jQueryUI 自动完成返回 AJAX 错误 0 当用户点击回车

【英文标题】：jQueryUI Autocomplete Returning AJAX Error 0 when user hits enter

【发布时间】：2020-02-02 03:02:46

【问题描述】：

我有一个搜索框，它使用 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 错误就不会发生？

【问题讨论】：

请详细说明 jQuery 和 jQuery UI 版本，哪个浏览器，以及 input 是否在 form 中。我无法在 Chrome 下重现您的问题，最新版本的 jQuery

@Twistingnether jQuery v1.11.2 和 jQuery UI - v1.11.4。输入字段在表单中，表单在表格中。

好的@ComputerLocus，哪个浏览器？另外，您是在谈论显示错误或一些 jQuery 弹出窗口的原生 alert() 吗？我在 jQuery 的代码中没有看到任何 alert()

@Twistingnether 它是一个警告框。它来自 jquery-ui。它发生在所有浏览器上，但是 Chrome 会抑制警报并在控制台中指示这一点。在控制台中，Chrome 表示它在导航期间“阻止”了警报。

由于这是通过 PHP 从您的 Web 服务器获取数据，您能否描述从单个字符返回的结果数量。由于您正在立即执行搜索，例如，如果用户输入 "a"，您希望得到 5 个结果还是 5000 个结果？

【参考方案1】：

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

你只需要这个属性

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

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

这里正在工作example

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

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

【参考方案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
        

    ,
    // ...
);

【讨论】：

问题是这是为了自动完成。所以发生的情况是有人开始输入，而不是等待自动完成结果在下拉列表中返回，他们按 Enter 键直接进入单独的搜索结果页面。我基本上希望该字段像 Google 搜索页面一样工作。当您键入时，会有建议，但您可以随时按 Enter 来搜索并忽略这些自动完成。这里的问题是，当有人点击输入时，它会针对 ajax 错误抛出此警报。为什么 jquery-ui 库会在这样的警报中抛出错误是没有意义的。

我可以想象 jQuery UI 有一个显示错误弹出窗口的 try-catch-block。如果你在 jQuery UI 之前发现这个错误，会有帮助吗？ Ajax 请求由 $.getJSON() 函数完成。您可以尝试在其周围放置一个“try... catch(e) ”...参见上面的代码。