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()"

javascript搜索功能

1 个答案: