javascript 搜索功能

Question

我有一个自动完成搜索栏，显示带有图像和文本的下拉菜单，效果很好，但问题是当没有要显示的搜索结果时，“未找到结果”文本也会与图像一起显示（例如实际结果），我知道这是由于我在 jquery 中的 _renderItem() 方法。我不希望它那样显示，但我只希望纯文本说“未找到结果”

我一直想弄清楚，但无法解决。任何帮助深表感谢。谢谢。

这是用于显示“未找到结果”的 javascript（只是代码的相关部分）

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;
}

如何修改这两个函数以仅显示“未找到结果”文本。

我尝试过使用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()"