#javascript #html #css
Вопрос:
Как сделать поисковый фильтр с помощью javascript? Я пытаюсь это сделать, но у меня ничего не получается.
Это мой ввод с помощью кнопки для поиска конкретного строителя
Моя цель состоит в том, чтобы создать фильтр с элементами, которые есть на карточке, указав имя конкретного строителя в фильтре поиска.
Это мой 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 lt; cards.length; i ){ let title = cards[i].querySelector(".body h5.card-title"); console.log(title); if(title.innerText.toUpperCase().indexOf(input) gt; -1) { cards[i].style.display = ""; } else { cards[i].style.display = "none"; } } } And this is my html code lt;div class="row"gt; lt;div class="col-lg-7 col-md-8 col-sm-12 col-xs-12"gt; lt;input type="text" id="filter" onkeyup="searchProduct()" placeholder="ME INFORME O NOME DA CONSTRUTORA ..."gt; lt;/divgt; lt;/divgt;lt;brgt; lt;div id="card-list"gt; lt;div class="col-lg-2 col-md-3"gt; lt;div class="card hvr-grow cbox"gt; lt;div class="body"gt; lt;div class="header"gt;lt;div class="card-status-orange"gt;AGUARDANDO ...lt;/divgt;lt;/divgt; lt;h5 class="card-title"gt;ADSMlt;/h5gt; lt;div class="card-footer"gt;21/10/2021lt;/divgt; lt;a href="" alt="Avatar" style="width:100%; border-radius: 10px;"gt;lt;/agt; lt;/divgt; lt;/divgt; lt;/divgt; lt;div class="col-lg-2 col-md-3"gt; lt;div class="card hvr-grow cbox"gt; lt;div class="body"gt; lt;div class="header"gt;lt;div class="card-status-orange"gt;AGUARDANDO ...lt;/divgt;lt;/divgt; lt;h5 class="card-title"gt;ALFA DO BRASILlt;/h5gt; lt;div class="card-footer"gt;21/10/2021lt;/divgt; lt;a href="" alt="Avatar" style="width:100%; border-radius: 10px;"gt;lt;/agt; lt;/divgt; lt;/divgt; lt;/div lt;/divgt; Ответ №1:
пробовать
title.innerText.toUpperCase().indexOf(input) gt; -1 вместо заголовка.внутренний текст
Ответ №2:
Я решил эту проблему следующим образом
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 lt; cards.length; i ) { let title = cards[i].querySelector(".card-body h5.card-title"); console.log(title); if(title.innerText.toUpperCase().indexOf(input) gt; -1) { cards[i].style.display = ""; } else { cards[i].style.display = "none"; } } }