Hola a todos, tengo una barra de búsqueda y algunas tarjetas de arranque, lo que quiero hacer es tener todas las tarjetas sin mostrar ninguna, pero una vez que estoy escribiendo en la barra de búsqueda (keyup), quiero mostrar solo las tarjetas que contienen el misma palabra Me siento atascado, así que alguna ayuda o algún consejo sería genial. Gracias.
Ejemplo
$("#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>Contiene obras si uso una cadena pero no si uso una variable.
Parece ser un problema de escape.
Está funcionando usando soporte
$("#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>