自动完成：检测没有结果与远程数据源

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); 
    } 
});?