jQueryUI autocomplete - when no results are returned

Question

I\'m wondering how one can catch and add a custom handler when empty results are returned from the server when using jQueryUI autocomplete.

There seem to be a few questio

Answer 1

It is easy to handle with response option

$( 'input.Srch' ).autocomplete({
    minLength: 3,
    .......
    response: function(event, ui) {
        if (!ui.content.length) {
                var noResult = { value:"",label:"No results found" };
                ui.content.push(noResult);
        }
    }
});

Here is my screenshot:

Answer 2

Considering source as php script:

what i did in my code is I returned NO results message from php script like

$ArrayMe =  Array();
if(rows found){
  array_push( $ArrayMe ,array('key1'=> $val1, 'key2'=> $val2, 'key3'=> $val3));
} else {
 array_push( $ArrayMe ,array("message"=>"No results found" ));
}
echo json_encode($ArrayMe);

from jquery:

 $( "input#val1" ).autocomplete({
        minLength: 2,

        source:function (request, response) {
        $.ajax({
                type: 'get',
                url: "path/to/phpscript.php",
                dataType: "json",
                data: { term: request.term },
                success: function(data) {
                        response($.map(data, function (value) {
                            if(value.message){
                                console.log(value.message);
                                $('p#val2').html("");
                                $('p#val3').html("");
                                return {Message: value.message}
                           } else {
                                return {
                                    key1: value.val1,
                                    key2: value.val2,
                                    key3: value.val3

                                }
                           }
                        }));
                    }   
                });
   },  
        focus: function( event, ui ) {
            $( "input#val1" ).val( ui.item.val1);
            $( "p#val2" ).html( ui.item.val2);
            $( "p#val2" ).html( ui.item.val3);
            return false;
        },
        select: function( event, ui ) {
            $( "input#val1" ).val( ui.item.val1);

            $( "p#val2" ).html( ui.item.val2);
            $( "p#val3" ).html( ui.item.val3);


            return false;
        }
    }).autocomplete( "instance" )._renderItem = function( ul, item ) {
        if(item.Message){
            return $( "<li>" )
                .append( "<div>" + item.Message +"</div>" )
                .appendTo( ul );
        } else{
            return $( "<li>" )
                .append( "<div>" + item.val1+ " | " + item.val2+  " | " + item.val3+"</div>" )
                .appendTo( ul );
        }
    };

. It worked perfectly fine for me.

If no data gets message as well as triggers required fields.

I am very poor in explanation so i posted entire code to make it easier.

Answer 3

Overwriting the response function of the autocompleter object might work, but that's monkeypatching. Using the response callback is most likely the cleanest way to achieve what you want.