Поиск по DIV

Иногда есть потребность быстро найти нужную информацию по 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);

Пример на чистой странице