Привет!

Поиск определенных элементов с помощью панели поиска — очень распространенная функция на современных веб-сайтах, и ее очень легко реализовать.

Хотя панели поиска могут быть закодированы на многих языках, преимущества кодирования их на JavaScript заключаются в том, что, поскольку JS встроен, вы можете реализовать его с помощью простого тега ‹script›, а во-вторых, панели поиска JS предоставляют мгновенные результаты, не требуя пользователю перезагрузить страницу или перейти на любую другую страницу.

В этом уроке вы узнаете, как сделать очень простую панель поиска с помощью JS и HTML.

В этой статье предполагается, что у вас есть базовые знания следующих языков:

  • JavaScript
  • HTML

Вам понадобится следующее:

  • Редактор кода (я использую VSCode)

Давайте начнем!

Шаг 0 — Сбор элементов/элементов

Убедитесь, что у вас есть коллекция элементов/элементов для поиска. Эти элементы могут быть элементами списка, элементами div или чем-то еще, что может иметь атрибут класса. Все они должны иметь атрибут класса одинаковый (все они должны относиться к одному и тому же классу).

Пример:

Шаг 1. Добавление панели поиска

Теперь, когда у вас есть список элементов для поиска, вы можете приступить к созданию панели поиска.

Панель поиска будет очень простым тегом ‹input› с несколькими атрибутами, как показано ниже:

Здесь важным моментом является наш атрибут oninput, который в основном запускает нашу функцию поиска каждый раз, когда пользователь изменяет значение ввода. Эта функция поиска будет принимать в качестве параметра значение строки поиска (в нижнем регистре).

Шаг 2 — Функция поиска

Теперь мы реализуем реальную функцию JS, которая будет искать элементы для получения результатов.

Мы хотим, чтобы функция проходила через innerHTML каждого элемента с указанным классом и проверяла, существует ли внутри него искомое значение. Если да, мы хотим сделать его видимым, а если нет, мы хотим сделать его невидимым.

Следующий код делает именно это:

Вот и все! Вы успешно создали довольно простую строку поиска, которая дает мгновенные результаты!

Полный код:

Я надеюсь, что вы нашли это полезным!

Спасибо,

Саумья Шах