CODEWITHSUNDEEP
javascripthtmljquerywordpress
ZUH.
ZUH.

Reputation: 195

How do I get both inputs to work with the search bar?

At the moment I've got the following code. When a user inerts text into the 'name' & 'sku' inputs, I need it to display the correct div based on the search after the button is clicked.

Below is the jquery & html code being used.

Please assist me with this one, not sure where I went wrong

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>

Upvotes: 0

Views: 98

Answers (1)

iamdlm
iamdlm

Reputation: 1973

For each input in your form call a function filter() will achieve the desired result.

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

Upvotes: 1

Related Questions