jQuery autocomplete display “No data” error message when results empty

问题

I am using Jörn Zaefferer's jQuery Autocomplete plug-in. Works just fine with data. I am trying to customise the functionality by showing a "no results" error message when there are no results returned from the OnChange function (key stroke). I want the message to be displayed in the same div as the results would display in. So when you are entering the letters in the input, the div will remain visible but the results will be replaced with a message. Nothing fancy in the styling, just plain text.

I can make the message appear but it ruins the function by keeping it there and not going back to displaying results (if you remove some of the letters).

Example of functionality is the qantas destination autocomplete www.qantas.com.au/travel/airlines/home/au/en

UPDATE

In the plug-in I added the function

function NoResults() {

        var wasVisible = select.visible();
        clearTimeout(timeout);
        stopLoading();
        var resultText = $('.ac_results').html();
        var errorMessage = "There are no results that match your request. Please try again.";
        //alert(resultText);
        if (resultText.indexOf(errorMessage) == -1) {
            $('.ac_results').append(errorMessage);
        }

};

Then in the request function I changed it to

function request(term, success, failure) {

        if (!options.matchCase)
            term = term.toLowerCase();
        var data = cache.load(term); if (data && data.length) { success(term, data); }
        else if ((typeof options.url == "string") && (options.url.length > 0)) {
            var extraParams = { timestamp: +new Date() }; $.each(options.extraParams, function(key, param) { extraParams[key] = typeof param == "function" ? param() : param; });
            $.ajax({ mode: "abort", port: "autocomplete" + input.name, dataType: options.dataType, url: options.url, data: $.extend({ q: lastWord(term), limit: options.max }, extraParams),
                success: function(data) { var parsed = options.parse && options.parse(data) || parse(data); cache.add(term, parsed); success(term, parsed); }
            });
        }
        else {
            select.emptyList();
            // failure(term);
            NoResults();
        }
};

The only problem I have left now is that once the error message displays and you change the input so that it returns results again, the error message is still at the bottom of the results list.

回答1:

I found a solution for your question. Using the "parse" option, you will not find this option at its document, I checked its source code find this option(check line #373).

You can use this plug-in like this:

$("#suggest4").autocomplete('http://jquery.bassistance.de/autocomplete/demo/search.php', {
  width: 300,
  multiple: true,
  matchContains: true,
  formatItem: formatItem,
  formatResult: formatResult,
  parse: function(data){
    var parsed = [];
    var rows = data.split("\n");
    for (var i=0; i < rows.length; i++) {
      var row = $.trim(rows[i]);
      if (row) {
        row = row.split("|");
        parsed[parsed.length] = {
          data: row,
          value: row[0],
          result: formatResult(row, row[0]) || row[0]
        };
      }
    }

    if (parsed.length == 0) {
      row = ['no results', null];
      parsed[parsed.length] = {
        data: row,
        value: row[0],
        result: formatResult(row, row[0]) || row[0]
      };
    }
    return parsed;
  }
});

But I think the best solution is to modify the Autocomplete plug-in and add an event like "noResults". You can suggest to the author to add this event :-)

来源：https://stackoverflow.com/questions/1699226/jquery-autocomplete-display-no-data-error-message-when-results-empty

标签

jquery

jquery-plugins

autocomplete

message