自动完成：使用远程数据源检测无结果

Question

上下文

• 我使用带有远程数据源的jQuery UI自动完成功能。
• 源以此格式发送数据：[{'label':'Bob', 'id':'03362548'}, {...}]。
• 我在搜索开始时显示加载程序gif。
• 数据过滤在服务器端完成。
• 如果没有结果（服务器发送[]），我想隐藏加载程序gif。

问题

如何检测搜索是否没有隐藏加载程序gif的结果？

代码

jquery

$('#redir-output').autocomplete({
    source: 'php/ajax/autocomplete.php',
    search: function(event, ui) {
        $('#redir-loader').show();
    },
    open: function(event, ui) {
        $('#redir-loader').hide();
    },
    select: function(event, ui) {
        $(this).attr('name', ui.item.id);
    }
});

Answer 1

默认情况下，当插件显示结果时，它会检查是否有要显示的数据。如果没有，则关闭菜单。

_response: function(content) {
    if (!this.options.disabled && content && content.length) {
        ...
    } else {
        // it closes the menu when content.length == 0 (no data)
        this.close();
    }​

关闭菜单会提高＆＃34;关闭＆＃34;事件，所以我虽然你可以使用它。但是，只有在菜单可见时才会触发关闭事件：

close: function(event) {
    clearTimeout(this.closing);
    // as the menu might not be visible at that moment, this is reliable
    if (this.menu.element.is(":visible")) {
        ...
        this._trigger("close", event);
    }
}​

我认为你必须使用源代码作为回调并自己实现ajax请求。使用＆＃34;完成＆＃34;回调，你可以隐藏加载图标，无论如何应该在请求结束时隐藏，否则返回数据：

$('#redir-output').autocomplete({
    source: function(request, response) {

        $.ajax({
            url: 'php/ajax/autocomplete.php',
            data: request,
            dataType: "json",
            success: function(data, status) {
                response(data);
            },
            error: function() {
                response([]);
            },
            complete: function() {
                $('#redir-loader').hide();
            }
        });

    },

    ,
    search: function(event, ui) {
        $('#redir-loader').show();
    },
    open: function(event, ui) {
        $('#redir-loader').hide();
    },
    select: function(event, ui) {
        $(this).attr('name', ui.item.id);
    }
});?