如何让搜索结果显示超过 2 个选项？答案

【问题标题】：How do I get the search results to display more than 2 options?如何让搜索结果显示超过 2 个选项？
【发布时间】：2021-10-27 10:39:09
【问题描述】：

我目前有这段代码可以在搜索时过滤掉文本 div。

我添加了 4 件名为“Hot Dog”的商品，它们的 SKU 完全不同，搜索时它只显示 2 件商品。如何让所有项目都显示？

JS 脚本会在搜索时过滤掉 div，但我似乎无法弄清楚为什么它只显示 2 个项目：

$(document).ready(function() {
  var $btns = $('.btn').click(function() {
    if (this.id == 'all') {
      $('#parent > div').fadeIn(450);
    } else {
      var $el = $('.' + this.id).fadeIn(450);
      $('#parent > div').not($el).hide();
    }
    $btns.removeClass('active');
    $(this).addClass('active');
  })

  var $search = $("#search").on('input', function() {
    $btns.removeClass('active');
    var matcher = new RegExp($(this).val(), 'gi');
    $('.box').show().not(function() {
      return matcher.test($(this).find('.name, .sku').text())
    }).hide();
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-4">
    <input type="text" id="search" class="form-control" placeholder="Search product by name or sku">
  </div>
</div>
<hr>
<div class="row" id="parent">
  <div class="col-md-2 box drink">
    <center>
      <img src="http://via.placeholder.com/80x80" class="" alt="">
      <p class="name">Pepsi </p>
      <p class="sku">D-1251</p>
      <p>$ 2,410</p>
    </center>
  </div>
  <div class="col-md-2 box drink">
    <center>
      <img src="http://via.placeholder.com/80x80" class="" alt="">
      <p class="name">Cocacola </p>
      <p class="sku">D-1314</p>
      <p>$ 2,410</p>
    </center>
  </div>
  <div class="col-md-2 box drink">
    <center>
      <img src="http://via.placeholder.com/80x80" class="" alt="">
      <p class="name">Mountien Dwe </p>
      <p class="sku">D-458</p>
      <p>$ 2,410</p>
    </center>
  </div>
  <div class="col-md-2 box food">
    <center>
      <img src="http://via.placeholder.com/80x80" class="" alt="">
      <p class="name">Burger </p>
      <p class="sku">F-125</p>
      <p>$ 2,410</p>
    </center>
  </div>
  <div class="col-md-2 box food">
    <center>
      <img src="http://via.placeholder.com/80x80" class="" alt="">
      <p class="name">Hot Dog </p>
      <p class="sku">F-7412</p>
      <p>$ 2,410</p>
    </center>
  </div>
  <div class="col-md-2 box food">
    <center>
      <img src="http://via.placeholder.com/80x80" class="" alt="">
      <p class="name">Hot Dog 2</p>
      <p class="sku">F-74122</p>
      <p>$ 2,4103</p>
    </center>
  </div>
  <div class="col-md-2 box food">
    <center>
      <img src="http://via.placeholder.com/80x80" class="" alt="">
      <p class="name">Hot Dog 2233</p>
      <p class="sku">F-74112</p>
      <p>$ 2,4103</p>
    </center>
  </div>
</div>

【问题讨论】：

标签： javascript html jquery wordpress

【解决方案1】：

要纠正这个问题，您需要在循环的每次迭代中定义 RegExp 对象：

$(document).ready(function() {
  var $btns = $('.btn').click(function() {
    if (this.id == 'all') {
      $('#parent > div').fadeIn(450);
    } else {
      var $el = $('.' + this.id).fadeIn(450);
      $('#parent > div').not($el).hide();
    }
    $btns.removeClass('active');
    $(this).addClass('active');
  })

  var $search = $("#search").on('input', function() {
    $btns.removeClass('active');
    let value = $(this).val();

    $('.box').show().not(function() {
      return new RegExp(value, 'gi').test($(this).find('.name, .sku').text());
    }).hide();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-4">
    <input type="text" id="search" class="form-control" placeholder="Search product by name or sku">
  </div>
</div>
<hr>
<div class="row" id="parent">
  <div class="col-md-2 box drink">
    <center>
      <img src="http://via.placeholder.com/80x80" class="" alt="">
      <p class="name">Pepsi </p>
      <p class="sku">D-1251</p>
      <p>$ 2,410</p>
    </center>
  </div>
  <div class="col-md-2 box drink">
    <center>
      <img src="http://via.placeholder.com/80x80" class="" alt="">
      <p class="name">Cocacola </p>
      <p class="sku">D-1314</p>
      <p>$ 2,410</p>
    </center>
  </div>
  <div class="col-md-2 box drink">
    <center>
      <img src="http://via.placeholder.com/80x80" class="" alt="">
      <p class="name">Mountien Dwe </p>
      <p class="sku">D-458</p>
      <p>$ 2,410</p>
    </center>
  </div>
  <div class="col-md-2 box food">
    <center>
      <img src="http://via.placeholder.com/80x80" class="" alt="">
      <p class="name">Burger </p>
      <p class="sku">F-125</p>
      <p>$ 2,410</p>
    </center>
  </div>
  <div class="col-md-2 box food">
    <center>
      <img src="http://via.placeholder.com/80x80" class="" alt="">
      <p class="name">Hot Dog </p>
      <p class="sku">F-7412</p>
      <p>$ 2,410</p>
    </center>
  </div>
  <div class="col-md-2 box food">
    <center>
      <img src="http://via.placeholder.com/80x80" class="" alt="">
      <p class="name">Hot Dog 2</p>
      <p class="sku">F-74122</p>
      <p>$ 2,4105</p>
    </center>
  </div>
  <div class="col-md-2 box food">
    <center>
      <img src="http://via.placeholder.com/80x80" class="" alt="">
      <p class="name">Hot Dog 2233</p>
      <p class="sku">F-74112</p>
      <p>$ 2,4103</p>
    </center>
  </div>
</div>

【讨论】：

谢谢，罗里，这行得通。您是否认为有一种可能的方法可以在搜索栏中添加一个按钮并让它只过滤点击时的 div？
当然。使用提交按钮将输入包装在 form 中并更改事件处理程序：jsfiddle.net/3r495kbc
这太棒了！谢谢，罗里。我创建了一个新的小提琴，然后我有 2 个单独的输入，将“名称”和“sku”分成 2 个单独的输入以及搜索按钮，但似乎不起作用。 jsfiddle.net/zuh_fiddl3/1eo5q2nf/1
问题在于您需要更改正则表达式，因为您正在寻找两个单独的单词而不是一个单词。我建议研究正则表达式单词边界，或者如果您仍然有问题，请提出一个新问题。

【解决方案2】：

如果您不想使用正则表达式，可以使用includes 进行快速搜索。另外，您在 Mountain Dew 中的 Dwe 上有一个小错字。

$(document).ready(function() {
  var $search = $("#search").on('input', function() {
    //$btns.removeClass('active');
    const searchTerm = $(this).val().toLowerCase();
    $('.box').filter((_, elem) => !$(elem).find(".name").text().toLowerCase().includes(searchTerm)).hide()
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-4">
    <input type="text" id="search" class="form-control" placeholder="Search product by name or sku">
  </div>
</div>
<hr>
<div class="row" id="parent">
  <div class="col-md-2 box drink">
    <center>
      <img src="http://via.placeholder.com/80x80" class="" alt="">
      <p class="name">Pepsi </p>
      <p class="sku">D-1251</p>
      <p>$ 2,410</p>
    </center>
  </div>
  <div class="col-md-2 box drink">
    <center>
      <img src="http://via.placeholder.com/80x80" class="" alt="">
      <p class="name">Cocacola </p>
      <p class="sku">D-1314</p>
      <p>$ 2,410</p>
    </center>
  </div>
  <div class="col-md-2 box drink">
    <center>
      <img src="http://via.placeholder.com/80x80" class="" alt="">
      <p class="name">Mountien Dwe </p>
      <p class="sku">D-458</p>
      <p>$ 2,410</p>
    </center>
  </div>
  <div class="col-md-2 box food">
    <center>
      <img src="http://via.placeholder.com/80x80" class="" alt="">
      <p class="name">Burger </p>
      <p class="sku">F-125</p>
      <p>$ 2,410</p>
    </center>
  </div>
  <div class="col-md-2 box food">
    <center>
      <img src="http://via.placeholder.com/80x80" class="" alt="">
      <p class="name">Hot Dog </p>
      <p class="sku">F-7412</p>
      <p>$ 2,410</p>
    </center>
  </div>
  <div class="col-md-2 box food">
    <center>
      <img src="http://via.placeholder.com/80x80" class="" alt="">
      <p class="name">Hot Dog 2</p>
      <p class="sku">F-74122</p>
      <p>$ 2,4103</p>
    </center>
  </div>
  <div class="col-md-2 box food">
    <center>
      <img src="http://via.placeholder.com/80x80" class="" alt="">
      <p class="name">Hot Dog 2233</p>
      <p class="sku">F-74112</p>
      <p>$ 2,4103</p>
    </center>
  </div>
</div>

【讨论】：