1

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

1 Answer 1

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.