Question

我需要在单独的div中显示它（因此.ui-autocomplete-loading不适用于此处）。当search事件发生时，我可以开始表明。但是我怎么能理解什么时候应该被隐藏呢？

Answer 1

我假设您正在使用远程数据源。如果是这样，请在您提供给$.ajax参数的函数内使用source。例如：

$("#auto").autocomplete({
    source: function(request, response) {
        $("#loading").show(); // Where #loading is the loading indicator

        $.ajax({
            url: "Your_URL_HERE",
            data: request.term,
            success: function(data) {
                response(data);
                $("#loading").hide();
            },
            error: function() {
                $("#loading").hide();
            }
        });
    }
});

工作示例： http://jsfiddle.net/gKFJU/

Answer 2

CSS解决方案

如果loading元素是输入控件的兄弟，则可以使用CSS通用兄弟选择器：

.loading {
    /* whatever */
}
#autocomplete.ui-autocomplete-loading ~ .loading {
    background-image: url(loading.gif);
}

Working example

jQuery解决方案

您可以添加search和response事件处理程序。

$("#autocomplete").autocomplete({
    delay: 500,
    minLength: 3,
    source: "/search.json",
    search: function () {
        $("#loading2").show();
    },
    response: function () {
        $("#loading2").hide();
    }
});

请注意，这种方法会受到竞争条件的影响，因为（i）AJAX请求不一定按照它们的启动顺序完成（ii）自动完成可能会触发比搜索更少的响应事件。

Combined demo here

如何在执行自动完成搜索时显示加载图标？

2 个答案: