javascript - 如果 ajax 返回时没有焦点，jquery ui 自动完成不会关闭选项菜单

Question

我正在使用 jquery ui 自动完成小部件和 ajax，并注意到以下问题。

背景:为了让用户能够专注于自动完成并在不键入任何内容的情况下获取选项，我使用 focus 事件:

autoComp.focus(function() { $(this).autocomplete("search", "");}

但是这会产生以下效果:当用户单击时，将发送 ajax 请求。在等待响应时，用户点击其他地方，自动完成就会变得模糊。但是，一旦响应返回，选项菜单就会弹出，即使自动完成功能没有焦点。为了让它消失，用户必须在自动完成内部单击一次，然后在自动完成外部单击一次，这有点烦人。

有什么办法可以防止这种情况发生吗？

编辑:我通过构建另一个知道元素 ID 的中介函数以一种非常丑陋的方式解决了这个问题，并且该函数使用 ID 调用 ajax 函数，该函数在成功时检查元素的焦点，如果是，则返回 null不专心。它非常丑陋，我仍在寻找替代方案。

编辑#2:尝试按照 Wlliam 的建议进行操作，但仍然不起作用..模糊时 xhr 未定义。 this 关键字存在某种问题，如果我在自动完成之外编写 getTags 函数，它可能会有不同的含义？

this.autocomplete = $('.tab#'+this.id+' #tags').autocomplete({
    minLength: 0,
    autoFocus: true,
    source: getTags,
    select: function(e, obj) {
        tab_id = $(this).parents('.tab').attr('id');
        tabs[tab_id].addTag(obj.item.label, obj.item.id, false);
        $(this).blur(); // This is done so that the options menu won't pop up again.
        return false;  // This is done so that the value will not stay in the input box after selection.
    },
    open: function() {},
    close: function() {}
});
$('.tab#'+this.id+' #tags').focus(function() {
    $(this).autocomplete("search", "");
});
$('.tab#'+this.id+' #tags').blur(function() {
    console.log('blurring');
    var xhr = $(this).data('xhr'); // This comes out undefined... :(
    if (xhr) {
        xhr.abort();
    };
    $(this).removeClass('ui-autocomplete-loading');
});

这是复制到源关键字的 getTags 函数:

        function getTags(request, response)
        {
            console.log('Getting tags.');
            $(this).data('xhr', $.ajax({
                url: '/rpc',
                dataType: 'json',
                data: {
                    action: 'GetLabels',
                    arg0: JSON.stringify(request.term)
                },
                success: function(data) {
                    console.log('Tags arrived:');
                    tags = [];
                    for (i in data) {
                        a = {}
                        a.id = data[i]['key'];
                        a.label = data[i]['name'];
                        tags.push(a);
                    }
                    response(tags);
                }
            }));
            console.log($(this).data('xhr'));
        }

Answer 1

我认为您需要使用 source 的回调选项，以便中止 AJAX 请求。引用自动完成小部件的概述:

The callback gets two arguments:

• A request object, with a single property called "term", which refers to the value currently in the text input. For example, when the user entered "new yo" in a city field, the Autocomplete term will equal "new yo".
• A response callback, which expects a single argument to contain the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data (String-Array or Object-Array with label/value/both properties). It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

就您而言，它可能如下所示:

$("#autoComp").autocomplete({
    source: function(request, response) {
        var searchString = request.term;

        // ajax call to remote server, perhaps filtered with searchString
        $(this).data('xhr', $.ajax({
            ...
            success: function(data) {
                ...
                // pass back the data filtered by searchString
                response(filteredList);
            }
        }));
    },
    minLength: 0,
    focus: function() {
        $(this).autocomplete("search");
    }
})
// cancel the request when user click away from the input box
.blur(function() {
    var xhr = $(this).data('xhr');
    if (xhr) xhr.abort();
});