Filter a list with jQuery using multiple keywords and allowing multiple results

Question

I've accomplished adding multiple keywords to the filter, but they work on items in the list containing both keywords. I would like to create a filter where any item in the list can match either or of the keywords. eg:

<input id="myInput" type="text" placeholder="Search any keywords">
<button id="mySearchBtn">search</button>    
<ul> 
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
</ul>

Search Input: Red Green

Result:

Red

Green

Here is my JQuery search function that allows multiple keywords. The search function only yields the last result of the items, but allows multiple keywords.

$("#mySearchBtn").click(function() {
  var value = $('#myInput').val().toLowerCase();
  var values = value.split(" ");
  var length = values.length
  var cards = $(".card-col-wrapper")

  for (j = 0; j < cards.length; j++) {
    for (i = 0; i < length; i++) {
      $(".card-col-wrapper").filter(function() {

        $(this).toggle($(this).text().toLowerCase().indexOf(values[i]) > -1)
      });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input id="myInput" type="text" placeholder="Search any keywords">
<button id="mySearchBtn">search</button>

<div class="card-col-wrapper">
  <h3>one</h3>
</div>
<div class="card-col-wrapper">
  <h3>two</h3>
</div>
<div class="card-col-wrapper">
  <h3>three</h3>
</div>

Input: one two

Result: two

How can I edit my search function to have the result of both "one" and "two"?

Answer 1

You can filter an array by the contents of another array like:

console.log(
  ['a', 'b', 'c', 'd', 'e', 'f'].filter(
    char => ['b', 'e'].includes(char)
  )
)

This means that in your case, you would do something like:

$("#mySearchBtn").click(function() {
    const words = $('#myInput').val().toLowerCase().split(/\s+/g);
            
    $(".card-col-wrapper h3").each(function () {
      if (words.includes($(this).text())) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input id="myInput" type="text" placeholder="Search any keywords">
<button id="mySearchBtn">search</button>

<div class="card-col-wrapper">
  <h3>one</h3>
</div>
<div class="card-col-wrapper">
  <h3>two</h3>
</div>
<div class="card-col-wrapper">
  <h3>three</h3>
</div>

Answer 2

Use Array#includes to see if the text exists. Also you need to use String#trim to ensure there is not extra spacing.

$("#mySearchBtn").click(function() {
  const value = $('#myInput').val().toLowerCase();
  const values = value.toLowerCase().split(" ");
  const $cards = $(".card-col-wrapper");
  const res = $cards.filter((i, ele) => {
    return values.includes($(ele).text().toLowerCase().trim());
  });
  $(res).toggle();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myInput" type="text" placeholder="Search any keywords">
<button id="mySearchBtn">search</button>

<div class="card-col-wrapper">
  <h3>one</h3>
</div>
<div class="card-col-wrapper">
  <h3>two</h3>
</div>
<div class="card-col-wrapper">
  <h3>three</h3>
</div>