jQuery UI 自动完成：在模糊之后、ajax 请求完成之前完成我输入的内容？

Question

假设我的 autocomplete 小部件有 2 个可能的选项：“JavaScript”和“jQuery”。如果我单击在输入中键入“j”，则会显示两个结果。现在假设我输入“q”，然后立即按 Tab 键。 “jq”只有一个可能的结果，那就是“jQuery”，但小部件无论如何都会选择“JavaScript”，因为 ajax 请求尚未返回，并且当我点击选项卡时“JavaScript”仍然突出显示。

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

---

仍然无法使其发挥作用。我尝试在搜索时进行记录，并不允许像 Andrew 确实如此，但 loading 似乎从来都不是真的，所以我无法取消它......实际上，我认为这是因为 delay 尚未满足，下一个搜索甚至还没有开始......我必须将某些内容绑定到按键事件。

---

好的。我想我已经差不多明白了：

$('#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 调用是否正在进行。如果是这种情况，请不要允许用户从下拉列表中选择选项，直到该请求完成并且出现最新的匹配项。

您问题中唯一可能无法满足的部分是最后一部分（我可能误解了您在这里的要求）：

[...] 然后当它出现时，选择第一个选项。

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

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

通过示例可能更容易理解：http://jsfiddle.net/RsSTa/。尝试输入“J”，然后输入“JQ”。您将无法继续使用过时的 AJAX 调用中的项目。

Answer 2

编辑4

使其成为一个函数。

(function($){
    $.fn.ajaxselect = function(options) {
        var settings = {
            delay: 300,
            data: function(term) {
                return {term:term};
            },
            url: '',
            select: function(item) {},
            html: true,
            minLength: 0,
            autoSelect: true
        };
        if(options) {
            $.extend(settings, options);
        }
        $(this).autocomplete({
            source: function(request, response) {
                var data = settings.data.call(this.element[0], request.term);
                $.ajax({
                    url: settings.url,
                    dataType: 'json',
                    data: data,
                    success: function(data, textStatus, $xhr) {
                        response(data);
                    },
                    error: function($xhr, textStatus) {
                        response([]);
                    }
                });
            },
            focus: function(event, ui) {
                return false;
            },
            search: function(event, ui) {
                $(this).data('lastSearch', this.value);
            },
            select: function(event, ui) {
                if($(this).val() === $(this).data('lastSearch')) {
                    if(settings.select.call(this, ui.item) !== false) {
                        $(this).val(ui.item.value);
                    }
                    $(this).data('selectedValue',$(this).val()).trigger('change');
                } 
                return false;
            },
            minLength: settings.minLength,
            autoFocus: settings.autoSelect,
            delay: settings.delay,
            html: settings.html
        }).bind('change.ajaxselect', function() {
            $(this).toggleClass('selected', $(this).val() === $(this).data('selectedValue'));
        });

        if(settings.autoSelect) {
            $(this).bind('autocompletechange', function(event, ui) {
                if($(this).val() !== $(this).data('selectedValue') && this.value.length > 0) {
                    var self = this;
                    var data = $.extend({autoSelect:1},settings.data.call(this, this.value));
                    $(this).addClass('.ui-autocomplete-loading');
                    $.ajax({
                        url: settings.url,
                        dataType: 'json',
                        data: data,
                        success: function(data, textStatus, $xhr) {
                            if(data.length >= 1) {
                                var item = $.ui.autocomplete.prototype._normalize(data)[0];
                                if(settings.select.call(self, item) !== false) {
                                    $(self).val(item.value);
                                }
                                $(self).data('selectedValue',$(self).val()).trigger('change');
                            }
                        },
                        complete: function($xhr, textStatus) {
                            $(self).removeClass('.ui-autocomplete-loading');
                        }
                    });
                }
            });
        }

        if(!settings.minLength) {
            $(this).bind('focus.ajaxselect', function() {
                if(!$(this).autocomplete('widget').is(':visible')) {
                    $(this).autocomplete('search','');
                }
            });
        }

        return $(this);
    };
})(jQuery);

使用情况：

$('#yourselector').ajaxselect({
    url: '/ajax/city'
});

现在效果很好。