php - 自动完成:使用远程数据源未检测到任何结果

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();
    }​

关闭菜单会引发“关闭”事件，因此我认为您可以使用它。但是，只有在菜单可见时才会触发关闭事件:

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 请求。使用“完成”回调，您可以隐藏加载图标，在任何情况下都应该在请求结束时隐藏，无论是否返回数据:

$('#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);
    }
});?