jquery - 检测到 jQuery UI 自动完成没有结果

Question

在您向我指出它们之前，是的，我已经查看了关于该主题的六篇帖子，但我仍然对为什么这不起作用感到困惑。

我的目标是检测自动完成何时产生 0 个结果。这是代码:

 $.ajax({
   url:'sample_list.foo2',
   type: 'get',
   success: function(data, textStatus, XMLHttpRequest) {
      var suggestions=data.split(",");

  $("#entitySearch").autocomplete({ 
    source: suggestions,
    minLength: 3,
    select: function(e, ui) {  
     entityAdd(ui.item.value);
     },
    open: function(e, ui) { 
     console.log($(".ui-autocomplete li").size());
     },
    search: function(e,ui) {
     console.log("search returned: " + $(".ui-autocomplete li").size());

    },
    close: function(e,ui) {  
     console.log("on close" +  $(".ui-autocomplete li").size());    
     $("#entitySearch").val("");
    }
   }); 

  $("#entitySearch").autocomplete("result", function(event, data) {

   if (!data) { alert('nothing found!'); }

  })
 }
}); 

搜索本身运行良好，我可以毫无问题地显示结果。据我了解，我应该能够使用 autocomplete("result") 处理程序拦截结果。在这种情况下，它根本不会触发。 (即使是不引用结果数量的通用警报或 console.log 也永远不会触发)。 open 事件处理程序显示正确数量的结果(当有结果时)，而 search 和 close 事件处理程序报告的结果大小总是落后一步。

我觉得我在这里遗漏了一些明显而刺眼的东西，但我就是看不到它。

Answer 1

jQueryUI 1.9

jQueryUI 1.9 为自动完成小部件添加了 response 事件，我们可以利用它来检测是否没有返回结果:

Triggered after a search completes, before the menu is shown. Useful for local manipulation of suggestion data, where a custom source option callback is not required. This event is always triggered when a search completes, even if the menu will not be shown because there are no results or the Autocomplete is disabled.

因此，考虑到这一点，我们必须在 jQueryUI 1.8 中进行的黑客攻击被替换为:

$(function() {
    $("input").autocomplete({
        source: /* */,
        response: function(event, ui) {
            // ui.content is the array that's about to be sent to the response callback.
            if (ui.content.length === 0) {
                $("#empty-message").text("No results found");
            } else {
                $("#empty-message").empty();
            }
        }
    });
});​

示例: http://jsfiddle.net/andrewwhitaker/x5q6Q/

---

jQueryUI 1.8

我找不到使用 jQueryUI API 执行此操作的直接方法，但是，您可以将 autocomplete._response 函数替换为您自己的函数，然后调用默认的 jQueryUI 函数(已更新以扩展自动完成的 prototype 对象):

var __response = $.ui.autocomplete.prototype._response;
$.ui.autocomplete.prototype._response = function(content) {
    __response.apply(this, [content]);
    this.element.trigger("autocompletesearchcomplete", [content]);
};

然后给autocompletesearchcomplete事件绑定(bind)一个事件处理器(内容是搜索的结果，一个数组):

$("input").bind("autocompletesearchcomplete", function(event, contents) {
    $("#results").html(contents.length);
});

这里发生的事情是您将自动完成的response 函数保存到一个变量(__response) 然后使用apply再次调用它。由于您正在调用默认方法，因此我无法想象此方法会产生任何不良影响。由于我们正在修改对象的原型(prototype)，这将适用于所有自动完成小部件。

这是一个工作示例:http://jsfiddle.net/andrewwhitaker/VEhyV/

我的示例使用本地数组作为数据源，但我认为这无关紧要。

---

更新:您还可以将新功能包装在它自己的小部件中，扩展默认的自动完成功能:

$.widget("ui.customautocomplete", $.extend({}, $.ui.autocomplete.prototype, {

  _response: function(contents){
      $.ui.autocomplete.prototype._response.apply(this, arguments);
      $(this.element).trigger("autocompletesearchcomplete", [contents]);
  }
}));

将调用从 .autocomplete({...}); 更改为:

$("input").customautocomplete({..});

然后绑定(bind)到自定义的 autocompletesearchcomplete 事件:

$("input").bind("autocompletesearchcomplete", function(event, contents) {
    $("#results").html(contents.length);
});

在此处查看示例:http://jsfiddle.net/andrewwhitaker/VBTGJ/

---

既然这个问题/答案已经引起了一些关注，我想我会用另一种方法来更新这个答案来完成这个。当页面上只有一个 自动完成小部件时，此方法最有用。这种方法可以应用于使用远程或本地源的自动完成小部件:

var src = [...];

$("#auto").autocomplete({
    source: function (request, response) {
        var results = $.ui.autocomplete.filter(src, request.term);

        if (!results.length) {
            $("#no-results").text("No results found!");
        } else {
            $("#no-results").empty();
        }

        response(results);
    }
});

在 if 中，您可以放置​​要在未检测到结果时执行的自定义逻辑。

示例: http://jsfiddle.net/qz29K/

如果您使用的是远程数据源，请这样说:

$("#auto").autocomplete({
    source: "my_remote_src"
});

然后您需要更改您的代码，以便您自己进行 AJAX 调用并可以检测何时返回 0 结果:

$("#auto").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "my_remote_src", 
            data: request,
            success: function (data) {
                response(data);
                if (data.length === 0) {
                    // Do logic for empty result.
                }
            },
            error: function () {
                response([]);
            }
        });
    }
});