Разделы

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

Пример:

Страна Население Дата % от населения Земли
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&nbsp;402&nbsp;170&nbsp;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&nbsp;369&nbsp;604&nbsp;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&nbsp;427&nbsp;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&nbsp;911&nbsp;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&nbsp;209&nbsp;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();


QR-код
© 2024. Лайфхаки для админа и не только
Наверх