Если у всех элементов 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').
Ну а основная проблема в том, что вы слишком рано делаете проверку. Бренды ещё не успели отфильтроваться, а вы проверяете результат фильтрации. Поэтому у вас фактически идет проверка результата предыдущей фильтрации.