使用 jQuery 过滤列表，使用多个关键字并允许多个结果答案

【问题标题】：Filter a list with jQuery using multiple keywords and allowing multiple results使用 jQuery 过滤列表，使用多个关键字并允许多个结果
【发布时间】：2019-06-14 05:18:21
【问题描述】：

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

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

输入：一二

结果：两个

如何编辑我的搜索功能以获得“一”和“二”的结果？

【问题讨论】：

如果您投反对票，请不要担心。只需添加所需的信息以帮助人们帮助您。

标签： javascript jquery

【解决方案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>

【讨论】：

【解决方案2】：

使用Array#includes 查看文本是否存在。您还需要使用String#trim 来确保没有多余的间距。

$("#mySearchBtn").click(function() {
  const value = $('#myInput').val().toLowerCase();
  const values = value.toLowerCase().split(" ");
  const $cards = $(".card-col-wrapper");
  const res = $cards.filter((i, ele) => {
    return values.includes($(ele).text().toLowerCase().trim());
  });
  $(res).toggle();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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>

【讨论】：

【解决方案3】：

    $(document).ready(function(){
            $("#myInput").on('keyup', function(){
                var value = $(this).val().toLowerCase();
                var arr = value.split(' ');
                $("#val li").each(function () {
                    for(let i=0;i<arr.length;i++){
                        if ($(this).text().toLowerCase().search(arr[i]) > -1) {
                        $(this).show();
                       
                    } else {
                        $(this).hide();
                    }
                    }
                   
                });
            });
       })

<input class="form-control" id="myInput" type="text"  placeholder="Search..">

【讨论】：