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

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

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

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

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

  • Максим:

    Как сделать чтоб искал с первого символа?
    Хорош скрипт

    Ответить
  • Владимир:

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

    Ответить
    • Alexander:

      Настройка focusOnLoad

      Ответить
      • Владимир:

        О как все просто оказалось. Респект!

        Ответить
  • Игорь:

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

    Ответить
    • Alexander:

      Можно попробовать все show() заменить, например, на show(1000)
      Или вообще переписать все функции показа и удаления на свои.

      Ответить
  • Евгений:

    Добрый день. А если мне нужно перейти с другой странице, по ссылке на указанную Вами с уже установленным поиском, например Китай.
    То есть, я хочу перейти с другой страницы по ссылке "site.ru/table?Китай", но чтобы на этой странице отображалась в таблице информация только про Китай. А в поле поиска было написано Китай. Это возможно?

    Ответить
    • Alexander:

      За функцией jQuery(this).keyup(function(e) {...}); ставим:

      jQuery(this).trigger('keyup');

      Перед инициализации плагина $('.search-input').jcOnPageFilter(); ставим:

      $('.search-input').val(decodeURI(location.hash).replace('#', ''));

      Этим мы берем с адресной строки хеш, вставляем его в инпут и имитируем нажатие кнопки для сортировки.

      Соотв, чтобы вставить туда китай, нужно открыть ссылку:
      site.ru/#Китай

      Ответить
  • Иван:

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

    Ответить
    • Alexander:

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

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

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

    Ответить
    • Alexander:

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

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

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

        Ответить
      • Alexander:

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

        Ответить