0
422
Vistas¿Cómo filtrar un artículo por tarjeta correctamente con javascript?
¿Cómo hacer un filtro de búsqueda con javascript? Estoy intentando hacerlo, pero no lo estoy consiguiendo.
Esta es mi entrada con el botón para buscar un constructor en particular
Mi objetivo es crear un filtro con los elementos que están en la tarjeta poniendo el nombre de un constructor específico en el filtro de búsqueda.
este es mi javascript
function searchProduct(){ const input = document.getElementById('filter').value.toUpperCase(); const cardContainer = document.getElementById('card-list'); console.log(cardContainer); const cards = cardContainer.getElementByClassName('card'); console.log(cards); for(let i = 0; i < cards.length; i++){ let title = cards[i].querySelector(".body h5.card-title"); console.log(title); if(title.innerText.toUpperCase().indexOf(input) > -1) { cards[i].style.display = ""; } else { cards[i].style.display = "none"; } } } And this is my html code <div class="row"> <div class="col-lg-7 col-md-8 col-sm-12 col-xs-12"> <input type="text" id="filter" onkeyup="searchProduct()" placeholder="ME INFORME O NOME DA CONSTRUTORA ..."> </div> </div><br> <div id="card-list"> <div class="col-lg-2 col-md-3"> <div class="card hvr-grow cbox"> <div class="body"> <div class="header"><div class="card-status-orange">AGUARDANDO ...</div></div> <h5 class="card-title">ADSM</h5> <div class="card-footer">21/10/2021</div> <a href="" alt="Avatar" style="width:100%; border-radius: 10px;"></a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="card hvr-grow cbox"> <div class="body"> <div class="header"><div class="card-status-orange">AGUARDANDO ...</div></div> <h5 class="card-title">ALFA DO BRASIL</h5> <div class="card-footer">21/10/2021</div> <a href="" alt="Avatar" style="width:100%; border-radius: 10px;"></a> </div> </div> </div </div>
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Resolví este problema así
function searchConstrutora() { const input = document.getElementById('filter').value.toUpperCase(); const cardContainer = document.getElementById('card-list'); console.log(cardContainer); const cards = cardContainer.getElementsByClassName('card'); console.log(cards); for(let i = 0; i < cards.length; i++) { let title = cards[i].querySelector(".card-body h5.card-title"); console.log(title); if(title.innerText.toUpperCase().indexOf(input) > -1) { cards[i].style.display = ""; } else { cards[i].style.display = "none"; } } }
·
Juan Pablo Isaza
Denunciar
0
probar
title.innerText.toUpperCase().indexOf(input) > -1en lugar de título.innterText
·
Juan Pablo Isaza
Denunciar
Responde la pregunta