Filter a list with jQuery using multiple keywords and allowing multiple results
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>