我按照下面的片段使用jQuery设置了一个过滤器。

我想能够按多个属性过滤——目前我只能按 title 属性进行过滤。

我应该如何修改代码，使我能够过滤这三个属性——例如 title、data-emoji 和 version 属性？

$('[data-search]').on('keyup', function(e) {
  var searchVal = $(this).val();
  var filterItems = $('[title]');
  console.log(filterItems);
  if (searchVal != '') {
    filterItems.addClass('hidden');
    $('[title*="' + searchVal.toLowerCase() + '"]').removeClass('hidden');
  } else {
    filterItems.removeClass('hidden');
  }
});

.hidden {
  display: none;
}

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

解决方案

你需要在属性上进行过滤。如果你新增了属性，请更新列表。

const attrs = ['title', 'data-emoji', 'version']; // change as needed

$('[data-search]').on('input', function() { // I prefer input to keyUp
  const searchVal = this.value.toLowerCase(); // change if you NEED case sensitive
  const $filterItems = $('span[title][data-emoji][version]'); // find items that have the attributes
  if (!searchVal) {
    $filterItems.removeClass('hidden');
    return;
  }
  $filterItems
    .addClass('hidden')
    .filter(function() {
      // .some will return hits in any of the attributes
      return attrs.some(attr => 
        ($(this).attr(attr) || '').toLowerCase().includes(searchVal)
      );
    })
    .removeClass('hidden');
});

.hidden {
  display: none;
}

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