Всех приветствую, столкнулся с небольшой проблемой, нужно в фильтрах осуществить поиск по буквам. Сначала написал сам, но получилось коряво, так как знаний пока не очень много. Но нашел решение в интернете. (ссылка на найденое решение https://www.jqueryscript.net/other/Easy-jQuery-Client-side-List-Filtering-Plugin-list-search.html
Проблема в том что с помощью этого решения можно привязвть фильтр только для одного поля(блока), а как сделать так чтобы он инициализировался один раз, допуситм по одному классу и поиск осуществлялся только в том блоке в котором находится input поиска, я не понимаю. Через this обратиться нигде не выходит, а если выходит то поиск работает кривовато.
<div class="col-12 col-md-12 col-sm-6 col-lg-6 col-xl-6">
<div class="new-filter-sort-block-wrapper block-new-filter-district">
<div class="title-col-filter mobile-title-col-filter"><span>Округ</span>
<div class="new-filter-count"><span data-count="0"></span></div>
</div>
<div class="new-filter-sort-block">
<div class="search-block">
<input type="text" placeholder="Поиск" id="search-box-district"/>
</div>
<div class="checkbox-sort-block">
<ul class="new-collection-ul">
<li class="collection-item-district new-collection-item-checkbox">
<div class="sort-checkbox clearfix">
<label>
<input class="new-checkbox-sort" type="checkbox" name="" value=""/><span class="checkbox-custom checkbox-custom-filter"></span><span class="label">Центральный</span>
</label><span class="count-sort-filter" data-object="123">123</span>
</div>
</li>
<li class="collection-item-district new-collection-item-checkbox">
<div class="sort-checkbox clearfix">
<label>
<input class="new-checkbox-sort" type="checkbox" name="" value=""/><span class="checkbox-custom checkbox-custom-filter"></span><span class="label">Ленинский</span>
</label><span class="count-sort-filter" data-object="1234">1234</span>
</div>
</li>
<li class="collection-item-district new-collection-item-checkbox">
<div class="sort-checkbox clearfix">
<label>
<input class="new-checkbox-sort" type="checkbox" name="" value=""/><span class="checkbox-custom checkbox-custom-filter"></span><span class="label">Калининский</span>
</label><span class="count-sort-filter" data-object="490">490</span>
</div>
</li>
<li class="collection-item-district new-collection-item-checkbox">
<div class="sort-checkbox clearfix">
<label>
<input class="new-checkbox-sort" type="checkbox" name="" value=""/><span class="checkbox-custom checkbox-custom-filter"></span><span class="label">Восточный</span>
</label><span class="count-sort-filter" data-object="89">89</span>
</div>
</li>
</ul>
<div class="no-apps-found-new-filter no-apps-found-new-filter-district"><span>Ничего не найдено</span></div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-12 col-sm-6 col-lg-6 col-xl-6">
<div class="new-filter-sort-block-wrapper block-new-filter-microdistrict">
<div class="title-col-filter mobile-title-col-filter"><span>Микрорайон</span>
<div class="new-filter-count"><span data-count="0"></span></div>
</div>
<div class="new-filter-sort-block">
<div class="search-block">
<input type="text" placeholder="Поиск" id="search-box-microdistrict"/>
</div>
<div class="checkbox-sort-block">
<ul class="new-collection-ul">
<li class="collection-item-microdistrict new-collection-item-checkbox">
<div class="sort-checkbox clearfix">
<label>
<input class="new-checkbox-sort" type="checkbox" name="" value=""/><span class="checkbox-custom checkbox-custom-filter"></span><span class="label">Южный</span>
</label><span class="count-sort-filter" data-object="123">123</span>
</div>
</li>
<li class="collection-item-microdistrict new-collection-item-checkbox">
<div class="sort-checkbox clearfix">
<label>
<input class="new-checkbox-sort" type="checkbox" name="" value=""/><span class="checkbox-custom checkbox-custom-filter"></span><span class="label">Тюменский 1</span>
</label><span class="count-sort-filter" data-object="1234">1234</span>
</div>
</li>
<li class="collection-item-microdistrict new-collection-item-checkbox">
<div class="sort-checkbox clearfix">
<label>
<input class="new-checkbox-sort" type="checkbox" name="" value=""/><span class="checkbox-custom checkbox-custom-filter"></span><span class="label">КПД</span>
</label><span class="count-sort-filter" data-object="490">490</span>
</div>
</li>
<li class="collection-item-microdistrict new-collection-item-checkbox">
<div class="sort-checkbox clearfix">
<label>
<input class="new-checkbox-sort" type="checkbox" name="" value=""/><span class="checkbox-custom checkbox-custom-filter"></span><span class="label">Ямальский</span>
</label><span class="count-sort-filter" data-object="89">89</span>
</div>
</li>
<li class="disabled collection-item-microdistrict new-collection-item-checkbox">
<div class="sort-checkbox clearfix">
<label>
<input class="new-checkbox-sort" type="checkbox" name="" value="" disabled="disabled"/><span class="checkbox-custom checkbox-custom-filter"></span><span class="label">Ямальский</span>
</label><span class="count-sort-filter" data-object="89">89</span>
</div>
</li>
</ul>
<div class="no-apps-found-new-filter no-apps-found-new-filter-microdistrict"><span>Ничего не найдено</span></div>
</div>
</div>
</div>
</div>
JS
function initializeListSearchDistrict(data) {
var toggleAnimationSpeed;
var itemSelector;
var foundItems;
var searchTextBoxSelector;
var noItemsFoundSelector;
if (typeof (data.toggleAnimationSpeed) !== 'undefined') toggleAnimationSpeed = data.toggleAnimationSpeed;
else toggleAnimationSpeed = 250;
if (typeof (data.itemSelector) !== 'undefined') itemSelector = data.itemSelector;
else itemSelector = '.collection-item';
if (typeof (data.searchTextBoxSelector) !== 'undefined') searchTextBoxSelector = data.searchTextBoxSelector;
else searchTextBoxSelector = '#search-box-district';
if (typeof (data.noItemsFoundSelector) !== 'undefined') noItemsFoundSelector = data.noItemsFoundSelector;
else noItemsFoundSelector = '.no-apps-found-new-filter-district';
cdsNewFilterFunc(toggleAnimationSpeed,itemSelector,foundItems,searchTextBoxSelector,noItemsFoundSelector);
}
function cdsNewFilterFunc(toggleAnimationSpeed,itemSelector,foundItems,searchTextBoxSelector,noItemsFoundSelector) {
function searchListItems(searchText) {
if (searchText === '') {
resetSearch();
$(noItemsFoundSelector).hide();
return;
}
foundItems = findItemsInList(searchText);
if (foundItems.length > 0) {
$(noItemsFoundSelector).hide();
}
else
$(noItemsFoundSelector).show();
}
function resetSearch() {
$('.btn-block-reset-filter > button').on('click', function(){
$(itemSelector).slideDown(toggleAnimationSpeed);
foundItems = $(itemSelector);
$(noItemsFoundSelector).hide();
});
$(itemSelector).slideDown(toggleAnimationSpeed);
foundItems = $(itemSelector);
}
function findItemsInList(searchText) {
var list = $(itemSelector);
var result = [];
for (var i = 0; i < list.length; i++) {
var element = list[i];
if ($(element).find('.label').html().toLowerCase().indexOf(searchText.toLowerCase()) < 0)
$(element).slideUp(toggleAnimationSpeed);
else {
result.push($(element));
$(element).slideDown(toggleAnimationSpeed);
}
}
return result;
}
$(document).ready(function () {
resetSearch();
$(searchTextBoxSelector).bind('input propertychange', function () {
searchListItems($(this).val());
});
});
}
initializeListSearchDistrict({
noItemsFoundSelector: '.no-apps-found-new-filter-district',
itemSelector: '.collection-item-district',
searchTextBoxSelector: '#search-box-district',
});