Detecting no results on jQuery UI autocomplete

Question

Before you point me to them, yes, I have reviewed the half dozen posts on this topic, but I am still stymied as to why this doesn't work.

My goal is to detect when the autocomplete yields 0 results. Here's the code:

 $.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!'); }

  })
 }
}); 

The search itself works fine, I can get results to appear without a problem. As I understand it, I should be able to intercept the results with the autocomplete("result") handler. In this case, it never fires at all. (Even a generic alert or console.log that doesn't reference the number of results never fires). The open event handler shows the correct number of results (when there are results), and the search and close event handlers report a result size that is always one step behind.

I feel like I'm missing something obvious and glaring here but I just don't see it.

Answer 1

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

I couldn't find a straightforward way to do this with the jQueryUI API, however, you could replace the autocomplete._response function with your own, and then call the default jQueryUI function (updated to extend the autocomplete's prototype 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/

My example uses a local array as a data source, but I don't think that should matter.

---

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

Changing your call from .autocomplete({...}); to:

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

And then bind to the custom autocompletesearchcomplete event later:

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

Then you'll need to change your code so that you make the AJAX call yourself and can detect when 0 results come back:

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