Geek Answers Handbook

JQuery UI autocomplete show something when no results

I have the following code:

// Autocomplete search
    $("#shop_search").autocomplete({
      source: '<%= spotify_search_path(:json) %>',
      minLength: 1,
      select: function(event, ui) {
        append_place(ui.item.name, ui.item.id, ui.item.shop_type, ui.item.address_geo, ui.item.contact, ui.item.email, ui.item.web);
        $("#shop_search").val('');
      }
    }).data( "autocomplete" )._renderItem = function( ul, item ) {
      return $( "<li></li>" )
      .data( "item.autocomplete", item )
      .append( "<a>" + "<span class='autocomplete_link'>" + item.name + "</span>" + "<br />" + "<span class='autocomplete_address'>" + item.address_geo + "</span>" + "</a>" )
      .appendTo( ul );

      $(".ui-autocomplete-loading").ajaxStart(function(){
        $(this).show();
      });

      $(".ui-autocomplete-loading").ajaxStop(function(){
        $(this).hide();
      });

    };

Currently, only pop-up autocomplete is displayed when there is a search result. I want it to show “No matches” when nothing is found. What should I add to the code?

Thank.

+5
source share
4 answers

If you use a jQuery ajax call for the source, you can add the "No Results" results to the results if there are none. Then, using the select method, you can simply check to see if the element has added "no results", and if so, do nothing. Here I determined that by checking if the id was zero.

$("#shop_search").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "<%= spotify_search_path(:json) %>",
            data: {
                term: request.term
            },
            success: function (data) {
                if (data.length == 0) {
                    data.push({
                        id: 0,
                        label: "No results found"
                    });
                }
                response(data);
            }
        });
    },
    select: function (event, ui) {
        if (ui.item.id != 0) {
            append_place(ui.item.name, ui.item.id, ui.item.shop_type, ui.item.address_geo, ui.item.contact, ui.item.email, ui.item.web);
            $("#shop_search").val('');
        }
    }
});

, " ", , .

+18

, null 0. 0 null, " " else . .

0

Maybe it helps

source: function( request, response ) {
    $.getJSON( url, {
        term: extractLast( request.term )
    }, response )
    .error(function() {
        console.log("no results");
    });
},
0
source 
$( "#jsonNameSearch" ).autocomplete({
    // This is the source of the autocomplete, in the success method if the 
    // length of the response is zero then highlight the field indicating no match.
    source: function( request, response ) {
        $.getJSON( 'jsonAutocomplete.ajax?dataType=drivers', {
            term: request.term 
        }, response )
        .success(function(data) { 
            (data.length == 0) ? $( "#jsonNameSearch" ).addClass('nomatch') : $( "#jsonNameSearch" ).removeClass('nomatch');
        });
    },      
    select: function( event, ui ) {         
        if (ui.item) self.location.replace('driverModify.htm?id='+ui.item.id);          
    }           
});
0
source

More articles:


All Articles