В моей сегодняшней статье я покажу вам, как выполнять поиск в таблице с помощью формы поиска в JavaScript.

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

Для демонстрационных целей это моя таблица.

Теперь у вас может быть таблица большего размера, чем на изображении выше, и наше решение по-прежнему будет работать нормально.

ДАВАЙТЕ НАЧНЕМ

Чтобы построить наш алгоритм поиска, нам нужно сначала определить столбцы, в которых мы будем искать.

Для этого урока я решил заставить алгоритм искать наличие искомого текста в столбцах имени, электронной почты, телефона и страны.

Для краткости, вот HTML и CSS, так как мы хотим сосредоточиться на аспекте JavaScript.

Вот как выглядит код

Теперь мы хотим объявить объект, который будет хранить данные таблицы, и функцию, которая создаст для нас таблицу, используя уже объявленные данные.

ФУНКЦИЯ

Приведенная ниже функция будет иметь 1 аргумент (об этом аргументе я расскажу позже в этом руководстве), и цель функции — генерировать записи (строки и ячейки).

Если я вызову функцию, вы заметите, что в нашей таблице теперь есть все данные о сотрудниках.

Вот как это выглядит

ПОСТРОЕНИЕ ПОИСКОВОГО АЛГОРИТМА

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

Чтобы построить эту логику, мы присоединим прослушиватель событий к входным данным поиска, а затем проверим, предоставлено ли значение в качестве поискового запроса.

Я хочу искать и отображать записи в таблице, как только начинаю печатать. Поэтому я буду использовать прослушиватель событий ввода, а затем проверю, пуст ли поисковый запрос.

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

ПРИШЛО ВРЕМЯ ОБЪЯСНЕНИЙ

Помните, мы объявили, что функция buildTable имеет только один параметр?

Ну вот и польза.

Все записи в таблице имеют идентификатор, прикрепленный к каждой из них. Таким образом, при поиске в таблице мы будем хранить идентификаторы записей, которые содержат текст, совпадающий с поисковым запросом, а затем передавать эти идентификаторы в функцию buildTable, чтобы она отображала записи, соответствующие поисковому запросу. иметь такое удостоверение личности.

Давайте изменим функцию buildTable, чтобы она обрабатывала параметр, если он предоставлен.

Теперь функция была изменена, чтобы перестроить таблицу для отображения:

  • Все записи, если параметр matchingIDs не указан.
  • Все записи, содержащие поисковый запрос, если указан параметр matchingIDs.
  • «ДАННЫЕ НЕ НАЙДЕНЫ», если поисковый запрос не дал результатов

Теперь давайте завершим наш код для обработки поискового запроса пользователя.

Вы заметите, что я использовал метод includes(), чтобы проверить, существует ли запрос в определенном свойстве. Теперь мы можем смело тестировать наш алгоритм.

Скопируйте и вставьте полный код ниже на свою страницу и найдите сотрудника, чтобы увидеть волшебство

Вот как выглядит таблица, когда я ввожу запрос «ugorji»

Вот как выглядит таблица, когда я ввожу запрос «sams»

Вот как выглядит таблица, когда я ввожу несуществующий запрос «samuel»

Помните, мы построили алгоритм поиска так, чтобы он также искал наличие поискового запроса в столбце страны?

Вот как выглядит таблица, когда я ввожу запрос «Германия».

Вот как выглядит таблица, если мы не указали поисковый запрос

Надеюсь, вы поняли один из способов создания формы поиска, позволяющей выполнять поиск по таблице в JavaScript.

ОБНОВЛЯТЬ

Обратите внимание, что использование метода includes() для строки выполняет поиск с учетом регистра, а это не то, что нам нужно. Чтобы выполнить поиск в строке без учета регистра, нам нужно использовать регулярное выражение.

«В этой статье я объяснил, как создать регулярное выражение для выполнения поиска в строке без учета регистра.

Прочитав статью, вот модификация кода.

Теперь, если вы ищете "откровенный", он выведет имя клиента без необходимости использовать заглавную букву.

Есть ли у вас какие-либо предложения? Дайте мне знать в разделе комментариев!

Вы дошли до конца моей статьи.

ДОПОЛНИТЕЛЬНЫЙ

Недавно я запустил пакет JavaScript, который проверяет ваши HTML-формы с помощью правил проверки, регулярных выражений и входных атрибутов формы.

Я буду признателен, если вы уделите несколько секунд, чтобы проверить это.

octaValidate на поиске продукта

Спасибо.