javascript - jQuery UI 自动完成 : Complete what I've typed after blur but before ajax request completes?

Question

假设我的 autocomplete小部件有 2 个可能的选项:“JavaScript”和“jQuery”。如果我点击输入“j”，两个结果都会出现。现在假设我输入“q”然后立即点击 Tab。 “jq”只有一个可能的结果，那就是“jQuery”，但是小部件无论如何都会选择“JavaScript”，因为 ajax 请求还没有返回，而“JavaScript”仍然是我点击选项卡时突出显示的内容。

有没有办法“解决”这个问题？即，我认为应该发生的是，我键入“jq”，点击选项卡，它留下输入中的“jq”，直到请求完成，然后当它完成时，选择第一个选项。

---

仍然无法让它工作。我在搜索时尝试录制，并禁止选择 Andrew确实如此，但是 loading 似乎从来都不是真的，所以我不能取消它......实际上，我认为这是因为 delay 没有得到满足并且下一次搜索甚至还没有开始……我将不得不为按键事件绑定(bind)一些东西。

---

好的。我想我快明白了:

$('#myselector').autocomplete({
    source: function(request, response) {
        var data = {};
        $(this.element).data('keyHandled', true).data('lastTerm', request.term);

        // *snip*

        $.ajax({
            url: '/ajax/major_city',
            dataType: 'json',
            data: data,
            success: function(data, textStatus, $xhr) {
                response(data);
            },
            error: function($xhr, textStatus) {
                response([]);
            },
        });
    },
    select: function(event, ui) {
        if(!$(this).data('keyHandled')) {
            // TODO perform another search for just one value and set the input immediately
            return false;
        }
        this.value = ui.item.value;
        $(this).trigger('change');
        return false;
    },
    minLength: 0,
    autoFocus: true,
    delay: 250
})
.keydown(function(event) {
    if($(this).val() !== $(this).data('lastTerm')) {
        $(this).data('keyHandled', false);
    }
});

如果用户在输入一堆内容后但在遇到延迟/下一次搜索开始之前从输入中跳出，这似乎可以正确地“取消”选择。现在我们可以执行另一个 ajax 调用，以根据输入中的内容获取单个“最佳匹配”值，然后对其进行设置。也无需再次弹出搜索窗口。

Answer 1

我假设您将自动完成配置为 autoFocus 选项设置为 true。考虑到这一点，您可以这样做:

/* Keep track of whether or not we're in an AJAX request*/
var loading = false;

$("input").autocomplete({
    source: function(request, response) {
        /* Beginning of an AJAX request; set loading to true */
        loading = true;

        $.ajax({
            /* (snip) Options for your AJAX request. */
            success: function(data) {
                /* Loading complete. */
                loading = false;
                response(data);
            }
        });
    },
    autoFocus: true,
    select: function () {
        /* prevent the user from selecting an item if we're still loading matches */
        return !loading;
    }
}).bind("keydown", function(event) {
    if (event.keyCode === $.ui.keyCode.TAB) {
        /* Don't let the user tab out if we're still loading matches: */
        return !loading;
    }
});

跟踪 AJAX 调用是否正在进行。如果是这种情况，请不要让用户从下拉列表中选择一个选项，直到该请求完成并且出现最近的匹配项。

你的问题中唯一不能满足的部分是最后一部分(我可能误解了你在这里的要求):

[...] and then when it does, picks the first option.

这可能是可行的，但从可用性的 Angular 来看，在最新鲜的项目出现之前禁止选择项目对我来说似乎更有意义。

毕竟，仅仅因为自动完成小部件有一个结果并不意味着当它最终出现时用户会想要选择它。

通过示例可能更容易理解:http://jsfiddle.net/RsSTa/ .尝试输入“J”，然后输入“JQ”。不允许您继续处理来自陈旧的 AJAX 调用的项目。