javascript - 使用多个关键字并允许多个结果使用 jQuery 过滤列表

Question

我已经完成了向过滤器添加多个关键字的操作，但它们对包含这两个关键字的列表中的项目起作用。我想创建一个过滤器，列表中的任何项目都可以匹配一个或一个关键字。例如:

<input id="myInput" type="text" placeholder="Search any keywords">
<button id="mySearchBtn">search</button>    
<ul> 
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
</ul>

搜索输入:红绿

结果:

红色

绿色

这是我的允许多个关键字的 JQuery 搜索功能。搜索功能仅产生项目的最后结果，但允许多个关键字。

$("#mySearchBtn").click(function() {
  var value = $('#myInput').val().toLowerCase();
  var values = value.split(" ");
  var length = values.length
  var cards = $(".card-col-wrapper")

  for (j = 0; j < cards.length; j++) {
    for (i = 0; i < length; i++) {
      $(".card-col-wrapper").filter(function() {

        $(this).toggle($(this).text().toLowerCase().indexOf(values[i]) > -1)
      });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input id="myInput" type="text" placeholder="Search any keywords">
<button id="mySearchBtn">search</button>

<div class="card-col-wrapper">
  <h3>one</h3>
</div>
<div class="card-col-wrapper">
  <h3>two</h3>
</div>
<div class="card-col-wrapper">
  <h3>three</h3>
</div>

输入:一二

结果:两个

如何编辑我的搜索函数以同时获得“一”和“二”的结果？

Answer 1

您可以通过另一个数组的内容过滤一个数组，例如:

console.log(
  ['a', 'b', 'c', 'd', 'e', 'f'].filter(
    char => ['b', 'e'].includes(char)
  )
)

这意味着在你的情况下，你会做类似的事情:

$("#mySearchBtn").click(function() {
    const words = $('#myInput').val().toLowerCase().split(/\s+/g);
            
    $(".card-col-wrapper h3").each(function () {
      if (words.includes($(this).text())) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input id="myInput" type="text" placeholder="Search any keywords">
<button id="mySearchBtn">search</button>

<div class="card-col-wrapper">
  <h3>one</h3>
</div>
<div class="card-col-wrapper">
  <h3>two</h3>
</div>
<div class="card-col-wrapper">
  <h3>three</h3>
</div>