Javascript 搜索可以'；t通过'显示结果；数据名称'；在Jquery中

我正在构建下面的搜索。我希望它能够通过

数据名

过滤搜索结果。例如，如果用户点击XL，则会显示数据名为“

”的所有div。我可以看到所有

结果，但其他按钮没有显示任何结果

inputfield

工作正常。问题出在按钮上

这里是一个链接到

这是我的密码

$（文档）.ready（函数（）{
$（“#searchInput”）。在（“keyup”，function（）上{
var value=$（this.val（）.toLowerCase（）；
$（“#searchFilterDiv div.SearchItem”）.filter（函数（）{
$（this）.toggle（$（this）.text（）.toLowerCase（）.indexOf（value）>-1）
});
});
var btns=$（'.filter按钮'）。单击（函数（）{
if（$（this）.data（'name'）=='all'）{
$（'searchFilterDiv div.SearchItem'）.fadeIn（450）；
}否则{
var otherData=$（this.data（'name'）；
$（“#searchFilterDiv div.SearchItem.SearchResults框项”）.not（otherData.hide（）；
}
BTN.removeClass（“活动”）；
$（this.addClass（'active'）；
})
});
。服务盒{
最小宽度：100px；
填料顶部：.8em；
填充底部：.8em；
左：1米；
右侧填充：1em；
字体大小：.9em；
边缘：.3em；
颜色：#4b4b；
文字装饰：无；
柔性生长：1；
文本对齐：居中；
}
.服务箱项目{
边框：1px实心#9797；
字体大小：.8em；
字号：500；
光标：指针；
显示：内联块；
文本对齐：居中；
}
.搜索结果框项目{
边框：1px纯色浅灰色；
边缘底部：2米；
填充：20px；
字体大小：.8em；
线高：1.3em；
文本对齐：左对齐；
光标：指针；
}
.service-box-item.filter-button.active{
边框：红色1px实心！重要；
}

按大小搜索：
搜索字段

全部
XS
S
M
L
XL
2XL
3XL

另一面
维瓦摩斯·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·。Nullam mauris dolor，hendrerit non lorem nec，dapibus nisl车辆。在《圣经》一书中，我们讨论了时间

M

XL


2XL



正面
维瓦摩斯·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·。Nullam mauris dolor，hendrerit non lorem nec，dapibus nisl车辆。在《圣经》一书中，我们讨论了时间

M




左边
维瓦摩斯·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·维韦拉·。Nullam mauris dolor，hendrerit non lorem nec，dapibus nisl车辆。在《圣经》一书中，我们讨论了时间


XS



首先，将内联样式与html一起使用，这将阻止重写样式，除非使用了
重要的

其次，在
keyup
上，从每个
div
中获取
数据名
，并使用
includes
检查其是否包含搜索项。由于
x
和
x
将受到不同的处理，因此也尝试转换案例

创建一个单独的函数
toggleDiDisplay
以隐藏相关的
div
，因为搜索和按钮单击将执行相同的功能。这将防止代码重复

如果没有匹配项，您可以微调函数并显示所有div


$（文档）.ready（函数（）{
$（“#searchInput”）。在（“keyup”，function（）上{
var value=$（this.val（）.toLowerCase（）；
切换显示（值）
});
var btns=$（'.filter按钮'）。单击（函数（）{
var getButtonDataName=$（this）.data（'name'）.toLowerCase（）；
如果（getButtonDataName==='all'）{
$（'searchFilterDiv div.SearchItem'）.fadeIn（450）；
}否则{
切换显示（getButtonDataName）
}
BTN.removeClass（“活动”）；
$（this.addClass（'active'）；
})
});
功能切换显示（值）{
console.log（值）
$（“#searchFilterDiv div.SearchItem”）。每个（函数（i，v）{
if（！$（this）.data（'name'）.toLowerCase（）.includes（value））{
$（this.addClass（'hide'））
}
})
}
。服务盒{
最小宽度：100px；
填料顶部：.8em；
填充底部：.8em；
左：1米；
右侧填充：1em；
字体大小：.9em；
边缘：.3em；
颜色：#4b4b；
文字装饰：无；
柔性生长：1；
文本对齐：居中；
}
.服务箱项目{
边框：1px实心#9797；
字体大小：.8em；
字号：500；
光标：指针；
显示：内联块；
文本对齐：居中；
}
.搜索结果框项目{
边框：1px纯色浅灰色；
边缘底部：2米；
填充：20px；
字号：0.8em；
线高：1.3em；
文本对齐：左对齐；
光标：指针；
}
.service-box-item.filter-button.active{
边框：红色1px实心！重要；
}
.隐藏{
显示：无！重要；
}

按大小搜索：
搜索字段

全部
XS
S
  var btns = $('.filter-button').click(function(){
      if($(this).data('name') == 'all'){
          $('#searchFilterDiv div.SearchItem').fadeIn(450);
      }else{
          var name = $(this).data('name');
          $('#searchFilterDiv div.SearchItem.search-results-box-item').each(function(i, obj) {
              var names = $(obj).data('name').split(/\s*,\s*/);
              if($.inArray(name,names) === -1)
                  $(obj).hide();
              else
                  $(obj).show();
          });
      }
      btns.removeClass('active');
      $(this).addClass('active');
  })