x

Поиск по 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);

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


Предыдущая новость
Следующая новость

Похожие новости

Комментарии (0)

Оставить комментарий


Плеер [VøidTherapy]

00:00
00:00

Новые комментарии

igor5841

igor5841

Спасибо!  Потестирую и добавлю)...

Полностью
Андрей

Андрей

Всё нашел, вот, можешь добавить:...

Полностью
Андрей

Андрей

Привет, Hyper os 1.0.6 Все идет как по инструкции, но при попытке...

Полностью
igor5841

igor5841

Вам нужно для 9 pro 5g: Андроид 12 -...

Полностью
Алексей

Алексей

А модель то realme 9 pro 5g. из какой ветки прошивку то брать ? и...

Полностью
Ко всем комментариям

Популярное

Реклама