javascript搜索功能

javascript search functionality

本文关键字：功能 搜索 javascript      更新时间：2023-09-26

我得到了一个自动完成搜索栏，显示带有图像和文本的下拉菜单，效果很好，但问题是当没有搜索结果可显示时，"未找到结果"文本也会显示带有图像（与实际结果一样），我知道这是由于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) {}，但似乎不起作用。

由于您唯一关心的是图像，因此您可以尝试以下操作：

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

添加错误属性，在出现错误时隐藏图像。由于没有找到结果，你会有一个破碎的图像，你可以很容易地隐藏使用：

onerror="$(this).hide()"
相关文章：