Hello everyone I have a search bar and some bootstrap cards, what I want to do is to have all the cards with display none, but once I'm typing on search bar (keyup), I want to display only the cards that contain the same word. I'm feeling stuck so some help or any advice would be awesome. Thanks.
Example
$("#search_value").keyup(function() {
let searchInputValue = $("#search_value").val();
$("div.card-body h4.card-title:contains('" + searchInputValue + "')").css("display", "flex");
})div.card-body h4.card-title {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
<input id="search_value" type="text" class="form-control" name="search_articles" placeholder="Search...">
<button class="search-icon"><img src="./search-icon.png" alt=""></button> </form>
<div class="card-body">
<h4 class="card-title pt-3 pb-3"><a href="./article-template.html"> article about videogames</a></h4>
<p class="card-text text-muted hide-card-text-mobile">In our last few articles...</p>
</div>Contains works if I use a string but not if I use a variable..
Seems to be an escape problems.
It's working using bracket
$("#search_value").keyup(function() {
let searchInputValue = $(this).val();
let titleContain = $(`div.card-body h4.card-title:contains('${searchInputValue}')`);
console.log(searchInputValue)
if (searchInputValue.length > 3)
titleContain.css("display", "flex");
else
titleContain.css("display", "none");
})div.card-body h4.card-title {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="search_value" type="text" class="form-control" name="search_articles" placeholder="Search...">
<button class="search-icon"><img src="./search-icon.png" alt=""></button> </form>
<div class="card-body">
<h4 class="card-title pt-3 pb-3"><a href="./article-template.html"> article about videogames</a></h4>
<p class="card-text text-muted hide-card-text-mobile">In our last few articles...</p>
</div>