jQueryUI自动完成：如何在文本输入失去焦点后取消缓慢的ajax请求

我使用的是一个jQueryUIAutoComplete字段，该字段与ajax查找绑定在一起，有时会非常慢。有时，用户会在ajax查询启动后，但在ajax调用返回之前，从文本输入字段中移出选项卡。发生这种情况时，即使文本输入不再具有焦点，也会出现“自动完成”弹出窗口，并且关闭弹出窗口的唯一方法是选择一个项目（而不是切换到另一个字段）

事实上，这显示了相同的行为（例如，在文本字段中输入'ariz'，等待'searching'动画出现，然后在返回任何结果之前将选项卡移出该字段）

一个有效的解决方案（但感觉像是黑客）是检查ajax的成功回调，查看文本字段是否仍然有焦点，如果没有，则使用空列表调用response（），例如：

        $( "#city" ).autocomplete({
        var elem = this.element;
        source: function( request, response ) {
            $.ajax({
                url: "http://ws.geonames.org/searchJSON",
                data: {name_startsWith: request.term},
                success: function( data ) {
                    if(!$(elem).is(':focus') {
                        response({});
                        return;
                    }
                    response( $.map( data.geonames, function( item ) {
                        return {
                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                            value: item.name
                        }
                    }));
                }
            });
        }
    });

---

有更优雅的解决方案吗？理想情况下，我希望在用户离开文本输入字段时立即取消ajax请求。

$。ajax

返回一个对象，该对象公开底层

XMLHttpRequest

对象的名称。因此，您只需要隐藏

jqXHR

，并在正确的时间中止请求。也许是这样的：

source: function(request, response) {
    var $this = $(this);
    var $element = $(this.element);
    var jqXHR = $element.data('jqXHR');
    if(jqXHR)
        jqXHR.abort();
    $element.data('jqXHR', $.ajax({
        // ...
        complete: function() {
            // This callback is called when the request completes
            // regardless of success or failure.
            $this.removeData('jqXHR');
            // And dismiss the search animation.
            response({});
        }
    });
}

然后你会想要一些关于城市的资料：

$('#city').blur(function() {
    var $this = $(this);
    var jqXHR = $(this).data('jqXHR');
    if(jqXHR)
        jqXHR.abort();
    $this.removeData('jqXHR');
});

在自动补全器的正常操作过程中，有时会出现短暂的模糊/聚焦，但只有当有人从列表中选择某个内容时才会出现这种情况；发生这种情况时，不应该有一个

$.ajax

请求在运行，所以我们不需要担心它。如果我错了，那么您可以在

blur

处理程序中使用计时器，并在

focus

回调中取消计时器（您也可以将计时器ID存储在另一个

.data（）

插槽中），从而绕过它

---

我还没有测试过这个，但我很确定它会起作用。

这太棒了！这让我得到了95%的支持，只是有几个问题：1）在源匿名函数中，“this”是自动完成对象，而不是元素——使用“this.element”。一旦我这样做了，数据绑定就工作了。2） 在complete anon函数中，添加一个“response（{}）”并关闭搜索动画。除此之外，这是完美的。非常感谢！仅供参考：我在您的答案中添加了“编辑”，但我没有编辑权限。我不确定你是否可以接受这些编辑，或者是否需要“同行评审”。否则，一旦编辑完成，我就可以把这个答案标记为正确。@NobodyMan:很抱歉，我只是把它从我的头顶上写了下来。我不得不对你的编辑进行一些调整，以使其立即获得批准（否则我们将不得不等待两个人批准），因此我移动了评论。@NobodyMan:谢谢你提出一个有趣的问题。一个小提示。你发射响应（{}）；在任何情况下，它实际上折叠了我加载的自动建议项。因此，我修改了complete

complete:function（jqXHR，textStatus）{//在请求完成时调用此回调//无论成功与否。$This.removeData（'jqXHR'）；//并关闭搜索动画。如果（'success'！=textStatus&&'notmodified'！=textStatus）{response（{}）；}}}