修改jQuery过滤代码以支持title、data-emoji、version多属性筛选

要让筛选功能同时匹配title、data-emoji和version三个属性，你需要替换原有的单一属性匹配逻辑，改用jQuery的filter()方法逐一检查每个元素的目标属性。以下是具体修改步骤和完整代码：

修改要点 #

• 统一将搜索值和属性值转为小写，实现不区分大小写的筛选
• 使用filter()方法遍历元素，只要任意一个属性包含搜索值就显示该元素
• 调整元素选择器，精准选中包含三个目标属性的元素（提升筛选效率）

修改后的完整代码 #

JavaScript #

$('[data-search]').on('keyup', function(e) {
  var searchVal = $(this).val().toLowerCase();
  // 选中所有包含目标属性的span元素
  var filterItems = $('span[data-emoji][title][version]');
  
  if (searchVal !== '') {
    filterItems.addClass('hidden');
    // 筛选出任意属性匹配搜索值的元素
    filterItems.filter(function() {
      var title = $(this).attr('title').toLowerCase();
      var emoji = $(this).data('emoji').toLowerCase();
      var version = $(this).attr('version').toLowerCase();
      return title.includes(searchVal) || emoji.includes(searchVal) || version.includes(searchVal);
    }).removeClass('hidden');
  } else {
    filterItems.removeClass('hidden');
  }
});

CSS（无需修改） #

.hidden {
  display: none;
}

HTML（无需修改） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<input type="search" data-search="" placeholder="filter">

<hr>

<div>
  <span data-emoji="😀" title="grinning face" version="1.0">😀</span>
  <span data-emoji="😃" title="grinning face with big eyes" version="0.6">😃</span>
  <span data-emoji="🥰" title="smiling face with hearts" version="11.0">🥰</span>
  <span data-emoji="😍" title="smiling face with heart-eyes" version="0.6">😍</span>
  <span data-emoji="👋" title="waving hand" version="0.6">👋</span>
  <span data-emoji="🤚" title="raised back of hand" version="3.0" >🤚</span>
  <span data-emoji="👌" title="OK hand" version="0.6">👌</span>
  <span data-emoji="🤌" title="pinched fingers" version="13.0" >🤌</span>
</div>

说明 #

• 搜索时会同时检查元素的title文本、data-emoji表情字符和version版本号，只要其中一项包含搜索内容，元素就会显示
• 转小写处理确保搜索"GRIN"和"grin"效果一致
• 后续若要新增筛选属性，只需在filter()的判断逻辑中添加对应的属性检查即可

内容的提问来源于stack exchange，提问作者4532066