Если у всех элементов display:none - поиск элементов при вводе в инпут любого буквы, цифры

UP: Решил пойти через обратную логику: если есть хоть один элемент с "display: list-item", то делай то-то, иначе то-то... Никак не могу понять, на странице есть фильтр слева, если под "Бренд" на ссылку "Показать всё" сверху над чекбоксами появится строка поиска, когда вводим в строку хоть одну букву, то происходит поиск по названиям чекбоксов и если что-то находит среди них, то показывает, если не находит, то должен вывести текст "Ничего не найдено". Строка поиска:

<li class="list_brand_none list_brand_none_CHAR_tip1" style="display: list-item;">
<input type="text" class="form-control brand-search filters-input-style" placeholder="Найти">
<i class="svg inline clear" aria-hidden="true" style="display: none;"><svg width="18" height="18"><use xlink:href="/bitrix/templates/aspro-lite/images/svg/header_icons.svg#close-9-9"></use></svg></i>
<i class="svg inline search" aria-hidden="true" style=""><svg width="18" height="18"><use xlink:href="/bitrix/templates/aspro-lite/images/svg/header_icons.svg#search-18-18"></use></svg></i>
<strong class="search-text-false" style="display: block;">Ничего не найдено</strong>
</li>

Если что-то нашли, то ниже в теге ul отображается вот так:

<ul class="filter-list filter-list-CHAR_tip1 opened" style="display: block;">
<li class="list_brand_none list_brand_none_CHAR_tip1" style="display: list-item;">Конфеты (5)</li>
<li class="list_brand_none list_brand_none_CHAR_tip1" style="display: list-item;">Кофе (17)</li>
</ul>

Если не нашли, то вот так:

<ul class="filter-list filter-list-CHAR_tip1 opened" style="display: block;">
<li class="list_brand_none list_brand_none_CHAR_tip1" style="display: none;">Конфеты (5)</li>
<li class="list_brand_none list_brand_none_CHAR_tip1" style="display: none;">Кофе (17)</li>
</ul>

Код который я пробовал не корректно работает:

    $('.brand-search').keyup(function(){
        let searchText =  $('.filter-list li'+"[style*='display: list-item']").length > 0;
        console.log(searchText)
        if(searchText == true){
            $('.search-text-false').hide();
        }else if(searchText == false){
            $('.search-text-false').show();
        }
    });

Если ввести 0 - текст "Ничего не найдено" не показывает, хотя должен! Логика по идее такая, если найден хоть один элемент с display: list-item, то скрывает блок .search-text-false, если же наоборот нет ни одного элемента с display: list-item, то показываем блок .search-text-false.

Немного изменил код, теперь фраза "Ничего не найдено" должна у фильтра "Бренд" появляться на месте "Показать всё" и наоборот, если что-то найдено, или в инпуте пусто, фраза показать все должна вернуться:

                let searchText =  $('.filter-list-BRAND li'+"[style*='display: list-item']").length > 0;
        console.log(searchText)
        if(searchText != true){
            $('.list_brand_none_BRAND > span').removeClass('btn-filter-choose-all');
            $('.list_brand_none_BRAND > span').addClass('filter-product-count');
            $('.list_brand_none_BRAND .filter-product-count').html('Ничего не найдено');
        }else{
            $('.list_brand_none_BRAND .filter-product-count').removeClass('filter-product-count');
            $('.list_brand_none_BRAND > span').addClass('btn-filter-choose-all');
            $('.list_brand_none_BRAND .btn-filter-choose-all').html('Выбрать все');
        }

Но и это некорректно работает..., если в строку поиска "Бренд" ввести аа, то уже должен показать текст "Ничего не найдено", однако показывает только если ввести ааа, и наоборот, если удалить из 3-х ааа и оставить 1 а, то покажет что нашел в поиске, но фразу "Ничего не найдено" не заменяет на "Показать все", а заменяет только когда все 3 ааа удалишь.


Ответы (1 шт):

Автор решения: Виктор Карев

Плохой критерий поиска $('.filter-list li'+"[style*='display: list-item']"). Объект li может выводиться вообще без стилей. Лучше использовать селектор :visible: $('.filter-list-BRAND li:visible').

Ну а основная проблема в том, что вы слишком рано делаете проверку. Бренды ещё не успели отфильтроваться, а вы проверяете результат фильтрации. Поэтому у вас фактически идет проверка результата предыдущей фильтрации.

→ Ссылка