Привет!
Поиск определенных элементов с помощью панели поиска — очень распространенная функция на современных веб-сайтах, и ее очень легко реализовать.
Хотя панели поиска могут быть закодированы на многих языках, преимущества кодирования их на JavaScript заключаются в том, что, поскольку JS встроен, вы можете реализовать его с помощью простого тега ‹script›, а во-вторых, панели поиска JS предоставляют мгновенные результаты, не требуя пользователю перезагрузить страницу или перейти на любую другую страницу.
В этом уроке вы узнаете, как сделать очень простую панель поиска с помощью JS и HTML.
В этой статье предполагается, что у вас есть базовые знания следующих языков:
- JavaScript
- HTML
Вам понадобится следующее:
- Редактор кода (я использую VSCode)
Давайте начнем!
Шаг 0 — Сбор элементов/элементов
Убедитесь, что у вас есть коллекция элементов/элементов для поиска. Эти элементы могут быть элементами списка, элементами div или чем-то еще, что может иметь атрибут класса. Все они должны иметь атрибут класса одинаковый (все они должны относиться к одному и тому же классу).
Пример:
Шаг 1. Добавление панели поиска
Теперь, когда у вас есть список элементов для поиска, вы можете приступить к созданию панели поиска.
Панель поиска будет очень простым тегом ‹input› с несколькими атрибутами, как показано ниже:
Здесь важным моментом является наш атрибут oninput, который в основном запускает нашу функцию поиска каждый раз, когда пользователь изменяет значение ввода. Эта функция поиска будет принимать в качестве параметра значение строки поиска (в нижнем регистре).
Шаг 2 — Функция поиска
Теперь мы реализуем реальную функцию JS, которая будет искать элементы для получения результатов.
Мы хотим, чтобы функция проходила через innerHTML каждого элемента с указанным классом и проверяла, существует ли внутри него искомое значение. Если да, мы хотим сделать его видимым, а если нет, мы хотим сделать его невидимым.
Следующий код делает именно это:
Вот и все! Вы успешно создали довольно простую строку поиска, которая дает мгновенные результаты!
Полный код:
Я надеюсь, что вы нашли это полезным!
Спасибо,
Саумья Шах