Фильтр контента по буквам на jQuery

Данный скрипт убирает контент, который не имеет совпадения с искомыми данными, а также подсвечивает найденное буквосочетание.

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

Пример:

Страна Население Дата % от населения Земли
1 Китай 1 402 170 000 21 марта 2020 18.03%
2 Индия 1 369 604 000 21 марта 2020 17.61%
3 США 331 427 186 4 июня 2019 4.26%
4 Индонезия 266 911 900 1 июля 2019 3.43%
5 Пакистан 217 209 656 21 марта 2020 2.79%
6 Бразилия 211 265 910 21 марта 2020 2.72%
7 Нигерия 206 207 716 21 марта 2020 2.65%
8 Бангладеш 170 297 094 21 марта 2020 2.19%
9 Россия 146 745 098 1 января 2020 1.89%
10 Мексика 126 577 691 1 июля 2019 1.63%
11 Япония 126 010 000 1 февраля 2020 1.62%
12 Эфиопия 112 079 000 1 июля 2019 1.44%
13 Филиппины 108 408 950 21 марта 2020 1.39%
14 Египет 100 149 450 21 марта 2020 1.29%
15 Вьетнам 96 208 984 1 апреля 2019 1.24%
16 ДРК 86 791 000 1 июля 2019 1.12%
17 Иран 83 951 594 21 марта 2020 1.08%
18 Турция 83 154 997 1 января 2020 1.07%
19 Германия 83 149 300 1 октября 2019 1.07%
20 Франция 68 859 599 1 января 2018 0.89%
По запросу ничего не найдено

HTML:

Скрипты:

Подключаем библиотеку jQuery

Подключаем скрипт фильтрации:

Инициируем его к нужному полю inputнапример:

Настройки:

focusOnLoad: false, - Фокусирование на поле для ввода при загрузке страницы

highlightColor: '#BFE2FF', - Цвет фона подсветки найденного буквосочетания

textColorForHighlights: '#000000', - Цвет букв этой подсветки

caseSensitive: false, - Чувствительность к регистру

hideNegatives: true, - Удаление строк без совпадений

parentSectionClass: 'filter-table', - Класс секции, которая удалится при нулевом результате поиска

noFoundClass: 'no-found' - Класс секции, которая будет показана при нулевом результате поиска

parentLookupClass: 'filter-row', - Класс строк, которые убираются и показываются

childBlockClass: 'filter-title' - Класс текста, по которому осуществляется поиск

Смотрите также:

Адаптивная reCAPTCHA

Правильное отображение капчи reCAPTCHA на малых экранах и в узких блоках

Добавить комментарий:

Ваш комментарий отправлен!