如何让两个输入都与搜索栏一起使用？

Posted 2023-05-09

【中文标题】如何让两个输入都与搜索栏一起使用？

【英文标题】：How do I get both inputs to work with the search bar?

【发布时间】：2021-10-29 22:05:35

【问题描述】：

目前我有以下代码。当用户将文本插入“名称”和“sku”输入时，我需要它在单击按钮后根据搜索显示正确的 div。

下面是使用的 jquery & html 代码。

请帮我解决这个问题，不知道我哪里出错了

jQuery($ => 
  var $search = $("#search-form").on('submit', e => 
    e.preventDefault();
    //$btns.removeClass('active');
    let value = $('#search-name').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">
        <form id="search-form">
          <input type="text" id="search-name" class="form-control" placeholder="Search name" />
          <input type="text" id="search-sku" class="form-control" placeholder="Search sku" />
          <button type="submit" id="search-button">Search</button>
        </form>
      </div>
    </div>
    <hr>
    <div class="row" id="parent">
        <div class="col-md-2 box drink">
          <div class="text-center">
            <img src="http://via.placeholder.com/80x80" class=""  />
            <p class="name">Pepsi</p>
            <p class="sku">D-1251</p>
            <p>$ 2,410</p>
            <p class="location">east</p>
          </div>
        </div>
        <div class="col-md-2 box drink">
          <div class="text-center">
            <img src="http://via.placeholder.com/80x80" class=""  />
            <p class="name">Pepsi</p>
            <p class="sku">D-12w1</p>
            <p>$ 2,410</p>
            <p class="location">north</p>
          </div>
        </div>
      <div class="col-md-2 box">
        <center>
          <img src="http://via.placeholder.com/80x80" class="" >
          <p class="name">Hot Dog </p>
          <p class="sku">11</p>
          <p>$ 2,410</p>
        </center>
      </div>
      <div class="col-md-2 box">
        <center>
          <img src="http://via.placeholder.com/80x80" class="" >
          <p class="name">Hot Dog 2</p>
          <p class="sku">12</p>
          <p>$ 2,4105</p>
        </center>
      </div>
      <div class="col-md-2 box">
        <center>
          <img src="http://via.placeholder.com/80x80" class="" >
          <p class="name">Hot Dog 2233</p>
          <p class="sku">13</p>
          <p>$ 2,4103</p>
        </center>
      </div>
    </div>

【问题讨论】：

sn-p 中的控制台错误。

另外，sku 是什么意思，如果用户输入两者，你想如何过滤这些项目？

嘿，请检查这个jsfiddle.net/7k9mag8s/1，

基本产品SKU号

如果用户使用第一个输入进行搜索并提交，它将按关键字过滤。但是，我希望他们能够使用这两个输入进行搜索。第一个是产品名称，第二个是产品 SKU 编号

【参考方案1】：

对于表单中的每个输入，调用函数filter() 将获得所需的结果。

jQuery($ => 
  var $search = $("#search-form").on('submit', e => 
    e.preventDefault();
    filter($('#search-name').val(), $('#search-sku').val());
  );
);

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

【讨论】：

嘿，谢谢！这一直有效，直到我更改了 HTML 代码并且它停止了正确过滤。还有其他方法吗？

你做了什么改变？

基本上只是在页面上添加了更多产品并更改了一些SKU

您是在动态添加这些产品吗？如果只是这样的话应该可以工作。

我的错，它正在工作，但我发现了一个小故障，如果 SKU 在 2 个 div 中相同，即使“名称”字段不同，它也会显示两者。它应该只显示搜索到的