Фильтр контента по буквам на 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:

<table class="filter-table">
	<thead>
		<tr>
			<th>№</th>
			<th>Страна</th>
			<th>Население</th>
			<th>Дата</th>
			<th>% от населения Земли</th>
		</tr>
	</thead>
	<tbody>
		<tr class="filter-row">
			<td>1</td>
			<td class="filter-title">Китай</td>
			<td>1&nbsp;402&nbsp;170&nbsp;000</td>
			<td>21 марта 2020</td>
			<td>18.03%</td>
		</tr>
		<!-- Еще строки таблицы -->
		<tr class="filter-row">
			<td>20</td>
			<td class="filter-title">Франция</td>
			<td>68&nbsp;859&nbsp;599</td>
			<td>1 января 2018</td>
			<td>0.89%</td>
		</tr>
	</tbody>
</table>
 <div class="no-found">По запросу ничего не найдено</div>

<thead>

<tr>

<th>Страна</th>

<th>Население</th>

<th>% от населения Земли</th>

</tr>

</thead>

<tbody>

<td class="filter-title">Китай</td>

<td>21 марта 2020</td>

</tr>

<td class="filter-title">Франция</td>

<td>1 января 2018</td>

</tr>

</tbody>

</table>

<div class="no-found">По запросу ничего не найдено</div>

Скрипты:

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

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

jQuery.fn.jcOnPageFilter = function(settings) {
	settings = jQuery.extend({
		focusOnLoad: false,
		highlightColor: '#BFE2FF',
		textColorForHighlights: '#000000',
		caseSensitive: false,
		hideNegatives: true,
		parentSectionClass: 'filter-table',
		parentLookupClass: 'filter-row',
		childBlockClass: 'filter-title',
		noFoundClass: 'no-found'
	}, settings);
	jQuery.expr[':'].icontains = function(obj, index, meta) {                    
		return jQuery(obj).text().toUpperCase().indexOf(meta[3].toUpperCase()) >= 0;                
	}; 
	if(settings.focusOnLoad) {
		jQuery(this).focus();
	}
	jQuery('.'+settings.noFoundClass).css("display", "none");
	var rex = /(<span.+?>)(.+?)(<\/span>)/g;
	var rexAtt = "g";
	if(!settings.caseSensitive) {
		rex = /(<span.+?>)(.+?)(<\/span>)/gi;
		rexAtt = "gi";
	}
	return this.each(function() {
		jQuery(this).keyup(function(e) {
			jQuery('.'+settings.parentSectionClass).show();
			jQuery('.'+settings.noFoundClass).hide();					
			if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
				return false;
				} else {
				var textToFilter = jQuery(this).val();
				if (textToFilter.length > 0) {
					if(settings.hideNegatives) {
						jQuery('.'+settings.parentLookupClass).stop(true, true).hide();
					}
					var _cs = "icontains";
					if(settings.caseSensitive) {
						_cs = "contains";
					}
					jQuery.each(jQuery('.'+settings.childBlockClass),function(i,obj) {
						jQuery(obj).html(jQuery(obj).html().replace(new RegExp(rex), "$2"));  
					});
					jQuery.each(jQuery('.'+settings.childBlockClass+":"+_cs+"(" + textToFilter + ")"),function(i,obj) {
						if(settings.hideNegatives) {
							jQuery(obj).closest('.'+settings.parentLookupClass).stop(true, true).show();
						}
						var newhtml = jQuery(obj).text();
						jQuery(obj).html(newhtml.replace(
							new RegExp(textToFilter, rexAtt), 
							function(match) {
								return ["<span style='background:"+settings.highlightColor+";color:"+settings.textColorForHighlights+"'>", match, "</span>"].join("");
							}
						));
					});
					
					} else {
					jQuery.each(jQuery('.'+settings.childBlockClass),function(i,obj) {
						var html = jQuery(obj).html().replace(new RegExp(rex), "$2");
						jQuery(obj).html(html);  
					});
					if(settings.hideNegatives) {
						jQuery('.'+settings.parentLookupClass).stop(true, true).show();
					}
				}
			}			
			if (!jQuery('.'+settings.parentLookupClass+':visible').length) {
				jQuery('.'+settings.parentSectionClass).hide();
				jQuery('.'+settings.noFoundClass).show();	 
			}	
		});
	});
};

jQuery.fn.jcOnPageFilter = function(settings) {

settings = jQuery.extend({

focusOnLoad: false,

highlightColor: '#BFE2FF',

textColorForHighlights: '#000000',

caseSensitive: false,

hideNegatives: true,

parentSectionClass: 'filter-table',

parentLookupClass: 'filter-row',

childBlockClass: 'filter-title',

noFoundClass: 'no-found'

}, settings);

jQuery.expr[':'].icontains = function(obj, index, meta) {

return jQuery(obj).text().toUpperCase().indexOf(meta[3].toUpperCase()) >= 0;

};

if(settings.focusOnLoad) {

jQuery(this).focus();

}

jQuery('.'+settings.noFoundClass).css("display", "none");

var rex = /(<span.+?>)(.+?)(<\/span>)/g;

var rexAtt = "g";

if(!settings.caseSensitive) {

rex = /(<span.+?>)(.+?)(<\/span>)/gi;

rexAtt = "gi";

}

return this.each(function() {

jQuery(this).keyup(function(e) {

jQuery('.'+settings.parentSectionClass).show();

jQuery('.'+settings.noFoundClass).hide();

if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {

return false;

} else {

var textToFilter = jQuery(this).val();

if (textToFilter.length > 0) {

if(settings.hideNegatives) {

jQuery('.'+settings.parentLookupClass).stop(true, true).hide();

}

var _cs = "icontains";

if(settings.caseSensitive) {

_cs = "contains";

}

jQuery.each(jQuery('.'+settings.childBlockClass),function(i,obj) {

jQuery(obj).html(jQuery(obj).html().replace(new RegExp(rex), "$2"));

});

jQuery.each(jQuery('.'+settings.childBlockClass+":"+_cs+"(" + textToFilter + ")"),function(i,obj) {

if(settings.hideNegatives) {

jQuery(obj).closest('.'+settings.parentLookupClass).stop(true, true).show();

}

var newhtml = jQuery(obj).text();

jQuery(obj).html(newhtml.replace(

new RegExp(textToFilter, rexAtt),

function(match) {

return ["<span style='background:"+settings.highlightColor+";color:"+settings.textColorForHighlights+"'>", match, "</span>"].join("");

}

));

});

} else {

jQuery.each(jQuery('.'+settings.childBlockClass),function(i,obj) {

var html = jQuery(obj).html().replace(new RegExp(rex), "$2");

jQuery(obj).html(html);

});

if(settings.hideNegatives) {

jQuery('.'+settings.parentLookupClass).stop(true, true).show();

}

if (!jQuery('.'+settings.parentLookupClass+':visible').length) {

jQuery('.'+settings.parentSectionClass).hide();

jQuery('.'+settings.noFoundClass).show();

}

});

};

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

<input class="search-input" type="text" placeholder="Введите несколько букв для фильтрации" />
<script>
	$('.search-input').jcOnPageFilter();
</script>

$('.search-input').jcOnPageFilter();

</script>

Настройки:

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

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

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

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

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

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

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

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

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

Максим: 25.07.2023 в 14:01

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

Ответить
Владимир: 22.01.2023 в 21:14

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

Ответить
- Alexander: 22.01.2023 в 21:53
  
  Настройка focusOnLoad
  
  Ответить
  - Владимир: 23.01.2023 в 15:20
    
    О как все просто оказалось. Респект!
    
    Ответить
Игорь: 02.10.2020 в 08:43

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

Ответить
- Alexander: 02.10.2020 в 10:35
  
  Можно попробовать все show() заменить, например, на show(1000)
  Или вообще переписать все функции показа и удаления на свои.
  
  Ответить
Евгений: 25.09.2020 в 13:51

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

Ответить
- Alexander: 26.09.2020 в 18:54
  За функцией jQuery(this).keyup(function(e) {...}); ставим:
  
  jQuery(this).trigger('keyup');
  
  Перед инициализации плагина $('.search-input').jcOnPageFilter(); ставим:
  
  $('.search-input').val(decodeURI(location.hash).replace('#', ''));
  
  Этим мы берем с адресной строки хеш, вставляем его в инпут и имитируем нажатие кнопки для сортировки.
  
  Соотв, чтобы вставить туда китай, нужно открыть ссылку:
  site.ru/#Китай
  Ответить
Иван: 17.06.2020 в 15:35

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

Ответить
- Alexander: 17.06.2020 в 19:20
  
  В подвал куда нибудь, ниже jQuery главное
  
  Ответить
Сергей: 25.05.2020 в 16:19

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

Ответить
- Alexander: 25.05.2020 в 16:37
  
  С ручным вводом слов, я такое не встречал даже.
  Такое флажками делается или селектами, например: jQuery Filterbucks Plugin
  Выбрал 1 слово из заданных, затем второе и увидел где оба совпадения.
  
  Ответить
  - Сергей: 25.05.2020 в 16:54
    
    Допустим хочу найти строку в таблице "Как оставить комментарий на сайте", если я напишу "Как добавить комментарий" результат будет отрицательный, а если бы скрипт нашел строку по словам "Как" и "комментарий" это было то что нужно
    
    Ответить
  - Alexander: 25.05.2020 в 17:29
    
    На JS такое не попадалось ни разу, на PHP с базой и то...
    Например, стандартный поиск на WP так не ищет.
    
    Ответить

Пример:

HTML:

Скрипты:

Настройки:

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

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

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