title: jQuery autocomplete display "No data" error message when results empty
body: <p>I am using Jörn Zaefferer's <a href="http://en.wikipedia.org/wiki/JQuery" rel="nofollow noreferrer">jQuery</a> <a href="http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/" rel="nofollow noreferrer">Autocomplete plug-in</a>. 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.</p>
  
  <p>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). </p>
  
  <p>Example of functionality is the qantas destination autocomplete www.qantas.com.au/travel/airlines/home/au/en </p>
  
  <hr>
  
  <p>UPDATE</p>
  
  <p>In the plug-in I added the function </p>
  
  <pre><code>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);
          }
  
  };
  </code></pre>
  
  <p>Then in the request function I changed it to</p>
  
  <pre><code>function request(term, success, failure) {
  
          if (!options.matchCase)
              term = term.toLowerCase();
          var data = cache.load(term); if (data &amp;&amp; data.length) { success(term, data); }
          else if ((typeof options.url == "string") &amp;&amp; (options.url.length &gt; 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 &amp;&amp; options.parse(data) || parse(data); cache.add(term, parsed); success(term, parsed); }
              });
          }
          else {
              select.emptyList();
              // failure(term);
              NoResults();
          }
  };
  </code></pre>
  
  <p>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.</p>