Иногда есть потребность быстро найти нужную информацию по DIV спискам, данный код поможет Вам в этом:
<input type="text" id="inputSearch" placeholder="Поиск.." title="Поиск..">
<ul id="my_friends_friends">
<div class="search_class">
<a class="search_class_name">Яблоко</a>
</div>
<div class="search_class">
<a class="search_class_name">Арбуз</a>
</div>
<div class="search_class">
<a class="search_class_name">Виноград</a>
</div>
<div class="search_class">
<a class="search_class_name">Персик</a>
</div>
<div class="search_class">
<a class="search_class_name">Вишня</a>
</div>
<div class="search_class">
<a class="search_class_name">Картофель</a>
</div>
<div class="search_class">
<a class="search_class_name">Батат</a>
</div>
<div class="search_class">
<a class="search_class_name">Изюм</a>
</div>
<div class="search_class">
<a class="search_class_name">Рыба</a>
</div>
</ul>
<div id="no" style="display: none">Нет данных...</div>
Ну и разумеется jаvascript:
function search() {
count = 0
let input = document.getElementById("inputSearch");
let filter = input.value.toUpperCase();
let ul = document.getElementById("my_friends_friends");
let li = ul.getElementsByClassName("search_class");
for (let i = 0; i < li.length; i++) {
let a = li[i].getElementsByClassName("search_class_name")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
count++
}
}
if(count===li.length){
no.style.display = "block"
}else{
no.style.display = "none"
}
}
document.addEventListener('keyup', search);