Фильтр контента по буквам на jquery
- Информация о материале
- Категория: Админ
- Просмотров: 532
Таким поиском очень удобно фильтровать большие объемы данных, например таблицы.
Пример:
№ | Страна | Население | Дата | % от населения Земли |
---|---|---|---|---|
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% |
По запросу ничего не найдено
HTML:
<input class="search-input form-control" type="text" placeholder="Введите несколько букв для фильтрации" /> <table class="filter-table table table-striped"> <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 class="filter-title">1 402 170 000</td> <td class="filter-title">21 марта 2020</td> <td class="filter-title">18.03%</td> </tr> <tr class="filter-row"> <td>2</td> <td class="filter-title">Индия</td> <td class="filter-title">1 369 604 000</td> <td class="filter-title">21 марта 2020</td> <td class="filter-title">17.61%</td> </tr> <tr class="filter-row"> <td>3</td> <td class="filter-title">США</td> <td class="filter-title">331 427 186</td> <td class="filter-title">4 июня 2019</td> <td class="filter-title">4.26%</td> </tr> <tr class="filter-row"> <td>4</td> <td class="filter-title">Индонезия</td> <td class="filter-title">266 911 900</td> <td class="filter-title">1 июля 2019</td> <td class="filter-title">3.43%</td> </tr> <tr class="filter-row"> <td>5</td> <td class="filter-title">Пакистан</td> <td class="filter-title">217 209 656</td> <td class="filter-title">21 марта 2020</td> <td class="filter-title">2.79%</td> </tr> </tbody> </table> <div class="no-found">По запросу ничего не найдено</div>
Подключаем бибилиотеку jQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
jQuery:
jQuery.fn.jcOnPageFilter = function(settings) { settings = jQuery.extend({ focusOnLoad: true, 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(this).trigger('keyup'); }); }; //$('.search-input').val(decodeURI(location.hash).replace('#', '')); $('.search-input').jcOnPageFilter();