Handling no results in jquery autocomplete

Question

Hey I'm trying to return a message when there are no results for the users current query! i know i need to tap into the keyup event, but it looks like the plugin is using it

Answer 1

You could try supplying a parse option (function to handle data parsing) and do what you need when no results are returned to parse.

This example assumes you're getting back an array of JSON objects that contain FullName and Address attributes.

   $('#search').autocomplete( {
       dataType: "json",
       parse: function(data) {
         var array = new Array();
         if (!data || data.length == 0) {
             // handle no data case specially
         }
         else {
            for (var i = 0; i < data.length; ++i) {
               var datum = data[i];
               array[array.length] = { 
                                       data: datum,
                                       value: data.FullName + ' ' + data.Address,
                                       result: data.DisplayName
                                     };
            }
         }
         return array;
       }
   });

Answer 2

This question is really out of date, anyways I'm working with the new jQuery UI 1.8.16, autocomplete is now pretty different:http://jqueryui.com/demos/autocomplete/#default

Anyways if you're trying to the do the same thing as the question asks, there is no more parse function, as far as I know there is no function that is called with the search results.

The way I managed to pull this off is by overriding the autocomplete's filter function - Note: this will affect all your autocompletes

$.ui.autocomplete.filter = function(array, term) {
            var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term), "i" );

            var aryMatches = $.grep( array, function(value) {
                return matcher.test(value.label || value.value || value);
            });

            if (aryMatches.length == 0){
                aryMatches.push({
                    label: '<span class="info" style="font-style: italic;">no match found</span>',
                    value: null
                });                     
            }

            return aryMatches;
        };

The function is slightly modified from the source, the grep call is the same, but if there are no results I add an object with a value of null, then I override the select calls to check for a null value.

This gives you an effect where if you keep typing and no matches are found you get the 'no matches found' item in the dropdown, which is pretty cool.

To override the select calls see jQuery UI Autocomplete disable Select & Close events

$(this).data('autocomplete').menu.options.selected = function(oEvent, ui){

            if ($(ui.item).data('item.autocomplete').value != null){
                //your code here - remember to call close on your autocomplete after


            }
        };

Since I use this on all my autocompletes on a page, make sure you check if value is null first! Before you try to reference keys that aren't there.