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

Question

目前我有以下代码。当用户将文本插入“名称”和“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="" alt="" />
            <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="" alt="" />
            <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="" alt="">
          <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="" alt="">
          <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="" alt="">
          <p class="name">Hot Dog 2233</p>
          <p class="sku">13</p>
          <p>$ 2,4103</p>
        </center>
      </div>
    </div>

Answer 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();
}