javascript搜索功能

Question

I got an autocomplete search bar displaying the dropdown menu with images and text which is working good, but the problem is when there are no search results to display, the "No results found" text is also displaying with an image (like the actual results) and I know it is due to my _renderItem() method in jquery. I don't want it to display like that, but I just want the plain text saying "No results found"

I have been trying to figure it out but was unable to. Any help is much appreciated. Thanks.

This is javascript for displaying "no results found" (just the relevant part of code)

success: function( data ) {
    if (data.length === 0) {
        data.push ({
        id: 0,
        label: "No results found"
        });
    }
   response( $.map( data, function( item ) {
      return {
        label: item.label,
        id: item.id

       };
   }));

And this is _renderItem()

.data('autocomplete')._renderItem = function(ul, item) {            
         return $('<li>')                                  
        .data('item.autocomplete', item)
        .append("<a>"+"<img src ='/account/"+item.id+"/icon/logo' width='40' height='40'/>" + item.label+"</a>")
        .appendTo(ul);         
     };

And this is select() event

select: function( event, ui ) { 
   window.location="/account/" + ui.item.id;
   return false;
}

How do I modify these two function in order to display just "No results found" text.

I have tried using if (data.length > 0) {} but it doesn't seem to be working.

Answer 1

Since your only concern is of image, you can try something like this:

append("<a>"+"<img src ='/account/"+item.id+"/icon/logo' onerror='$(this).hide()' width='40' height='40'/>" + item.label+"</a>")

Adding an error attribute which hides the image on error. Since on no results found, you'll have a broken image which you easily hide using:

onerror="$(this).hide()"