How display error when there is no match using JQuery autocomplete?

Question

JQuery has a cool autocomplete function. What I want is if there are no matching entries from the autocomplete (for example user types in zadasdasda) to flag this to the user because the user can only enter something in this particular field that matches a value from a set of values in database. Before someway says just use a picklist, there are too many possible entries (> 1,000). I just want to check there is nothing already out there to do this in JQuery before I write a callback to do it myself. I can't find anything just want to double check.

Thanks

"to flag an error" What does this mean? You say that "No Entries Found" to be displayed in the drop down? — Praveen Kumar Purushothaman, Sep 05 '12 at 11:11
possible duplicate of [Detecting no results on jQuery UI autocomplete](http://stackoverflow.com/questions/4718968/detecting-no-results-on-jquery-ui-autocomplete) — allicarn, Sep 18 '15 at 21:05

score 3 · Accepted Answer · answered Sep 05 '12 at 11:44

Perhaps this will help. Here is a way to do it if I understand your need.

In my case the autocomplete gets data from a server via Ajax.

$("#myselect").autocomplete({
  source: function(request, response) {
    $.ajax({
      url: searchUrl,
      dataType: "json",
      data: request,                    
      success: function (data) {
        // No matching result
        if (data.length == 0) {
          alert('No entries found!');
          $("#myselect").autocomplete("close");
        }
        else {
          response(data);
        }
      }});
    },
  dataType: "json",
  autoFill: false,      
  scroll: false,
  minLength: 2,
  cache: false,
  width: 100,
  delay: 500,           
  select: function(event, ui) { 
    //eventuallydosomething(ui.item.value);
    $("#myselect").autocomplete("close");
  } 
});

The part which interests you is when the data is returned from the server:

  success: function (data) {
      // If we get no matching result
      if (data.length == 0) {
        alert('No entries found!');
        $("#myselect").autocomplete("close");
      }

score 0 · Answer 2 · edited May 23 '17 at 12:16

You can replace the autocomplete._response function with your own, and then call the default jQueryUI function

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) {
    if(contents.length<1){
     $("#results").html("No Entries Found");
    }
   else{
      $("#results").html("");
   }
});

DEMO

Source of the example

How display error when there is no match using JQuery autocomplete?

2 Answers2