handling “No results” with Jquery Autocomplete

Question

Hey I'm trying to return a message when there are no results for the users current query! I have looked all over the net and there are similar scenarios, but I can't seem to get it working with my code below! Can anyone help me figure this out please, as I am pulling my hair out trying to fix it!

I need to maintain the ability to use the keyboard to scroll down through the results.

Thanks in advance.

HTML

   <div id="search_box">
     <form id="search_form" autocomplete="off" action="" onSubmit="return false;">
        <input type="text" id="suggestSearchBox" value="Search by City or Hotel Name" onClick="this.value='';" />
     </form>
   </div>

Javascript NOTE: The remote data source is called "dataLocCodes", which is a javascript array

// JavaScript Document
$(function() {
   $("#suggestSearchBox").focus().autocomplete(dataLocCodes, {
      max: 15,
      selectFirst: true,
      matchContains: true,
      formatItem: function(row, i, max){
      if (row.hotelId) {
         return row.accomName + ' - ' + row.city + ' - ' + row.country;
      } else {
         return row.city + ' - ' +    row.country;
      }
   }
}).result(
   function(event, row, formatted) {
      $("input#suggestSearchBox").val(row.city + ' - ' + row.country);
      var param = row.locparam;
      var encoded_url = param.replace(/ /gi,"+");
      encoded_url = encoded_url.replace(/&/gi,"amp");
      window.location.href = "hotels.html?location=" + encoded_url;
   });
});

Daniel Gimenez Daniel Gimenez · Accepted Answer · 2013-06-23T13:05:42

There are a couple of ways to handle this. You can either create a source method so that if the results from the filter are empty, you add "no results" as a value, or you handle the response event to display a message that no results where returned in your ui. If using the source method, then add a select handler to prevent No Result from being a value.

var availableTags = ['Abc', 'Def', 'ghi'];
$('#noresults').autocomplete({
    source: function (request, response) {
        var responses = $.ui.autocomplete.filter(availableTags, request.term);
        if (responses.length == 0) responses.push('No Result');
        response(responses);

    },
    response: function (event, ui)
    {
        if (ui.content.length == 0) {
            console.log('No results');
        }
    },
    select: function (event, ui) {
        // don't let no result get selected
        return (ui.item.value != 'No Result');
    }
});

handling “No results” with Jquery Autocomplete

1 Answers