javascript 搜索功能

Question

我有一个自动完成搜索栏，显示带有图像和文本的下拉菜单，效果很好，但问题是当没有搜索结果可显示时，"No results found" 文本也会显示图像（就像实际结果一样）我知道这是由于我在 jquery 中的 _renderItem() 方法造成的。我不希望它那样显示，但我只想要显示 "No results found"

的纯文本

我一直想弄明白，但没能弄明白。任何帮助深表感谢。谢谢。

这是 javascript 用于显示 "no results found"（只是代码的相关部分）

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

       };
   }));

这是 _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);         
     };

这是select()事件

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

如何修改这两个函数以仅显示 "No results found" 文本。

我试过使用 if (data.length > 0) {} 但它似乎不起作用。

Answer 1

既然你只关心形象，你可以试试这样：

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

添加错误属性，错误时隐藏图像。由于没有找到结果，您将得到一个损坏的图像，您可以使用以下方法轻松隐藏它：

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

javascript 搜索功能

javascript search functionality

javascript

jquery

search

autocomplete