在 jQuery UI 自动完成上没有检测到结果

jQueryUI 1.9

jQueryUI 1.9 has blessed the autocomplete widget with the response event, which we can leverage to detect if no results were returned:

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.

So, with that in mind, the hacking we had to do in jQueryUI 1.8 is replaced with:

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

Example: http://jsfiddle.net/andrewwhitaker/x5q6Q/

jQueryUI 1.8

我找不到使用jQueryUI API执行此操作的直接方法，但是，您可以用自己的函数替换autocomplete._response函数，然后调用默认的jQueryUI函数(updated to extend the autocomplete's 101 object):

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

And then bind an event handler to the autocompletesearchcomplete event (contents is the result of the search, an array):

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

What's going on here is that you're saving autocomplete's response function to a variable (__response) and then using apply to call it again. I can't imagine any ill-effects from this method since you're calling the default method. Since we're modifying the object's prototype, this will work for all autocomplete widgets.

Here's a working example: http://jsfiddle.net/andrewwhitaker/VEhyV/

我的示例使用本地数组作为数据源，但我认为这不重要.

Update: You could also wrap the new functionality in its own widget, extending the default autocomplete functionality:

$.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({..});

然后绑定到自定义autocompletesearchcomplete事件:

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

See an example here: http://jsfiddle.net/andrewwhitaker/VBTGJ/

Since this question/answer has gotten some attention, I thought I'd update this answer with yet another way to accomplish this. This method is most useful when you have only one autocomplete widget on the page. This way of doing it can be applied to an autocomplete widget that uses a remote or local source:

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

Inside the if is where you would place your custom logic to execute when no results are detected.

Example: http://jsfiddle.net/qz29K/

If you are using a remote data source, say something like this:

$("#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([]);
            }
        });
    }
});