Поиск по буквам (одна инициализация нескольких блоков)


#1

Всех приветствую, столкнулся с небольшой проблемой, нужно в фильтрах осуществить поиск по буквам. Сначала написал сам, но получилось коряво, так как знаний пока не очень много. Но нашел решение в интернете. (ссылка на найденое решение 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',
});

#2

Попробовал разобраться в твоей проблеме, не получилось. Недостаточно информации чтобы понять как должен выглядеть результат и какое состояние кода сейчас. Можешь скинуть запускаемый вариант кода с которым можно поиграться?


#3

Извиняюсь, что так долго не отвечал, я решил проблему самостоятельно, взялся за код и пересмотрел все с самого начала, если интересно, то могу скинуть на след неделе, как на работу выйду )


#4

Кидай, будет интересно посмотреть решение