Фильтр контента по буквам на 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' - Класс текста, по которому осуществляется поиск

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

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

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

Комментарии:

  • Иван:

    Как и где подключаем скрипт фильтрации на wordpress?

    Ответить
    • Alexander:

      В подвал куда нибудь, ниже jQuery главное

      Ответить
  • Сергей:

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

    Ответить
    • Alexander:

      С ручным вводом слов, я такое не встречал даже.
      Такое флажками делается или селектами, например: jQuery Filterbucks Plugin
      Выбрал 1 слово из заданных, затем второе и увидел где оба совпадения.

      Ответить
      • Сергей:

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

        Ответить
      • Alexander:

        На JS такое не попадалось ни разу, на PHP с базой и то…
        Например, стандартный поиск на WP так не ищет.

        Ответить