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

Posted

技术标签:

【中文标题】如何让搜索结果显示超过 2 个选项？【英文标题】：How do I get the search results to display more than 2 options? 【发布时间】：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="" >
      <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="" >
      <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="" >
      <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="" >
      <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="" >
      <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="" >
      <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="" >
      <p class="name">Hot Dog 2233</p>
      <p class="sku">F-74112</p>
      <p>$ 2,4103</p>
    </center>
  </div>
</div>

【问题讨论】：

【参考方案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="" >
      <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="" >
      <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="" >
      <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="" >
      <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="" >
      <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="" >
      <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="" >
      <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="" >
      <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="" >
      <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="" >
      <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="" >
      <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="" >
      <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="" >
      <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="" >
      <p class="name">Hot Dog 2233</p>
      <p class="sku">F-74112</p>
      <p>$ 2,4103</p>
    </center>
  </div>
</div>

【讨论】：

以上是关于如何让搜索结果显示超过 2 个选项？的主要内容，如果未能解决你的问题，请参考以下文章

el-select模糊搜索前,搜索前显示几个选项

如何使得matlab的计算结果默认显示为小数

如何从 google.maps.places.Autocomplete 获得超过 5 个结果？

Facebook 应用未显示在搜索中：超过 10 个 MAU，沙盒模式已禁用

如何在 Android 选项卡之间进行通信

如何让 youtrack 不显示已解决的问题