zorro76
@zorro76

Как спрятать пустую категорию списка при фильтрации?

Есть список штатов и городов, фильтруем города, по первым введенным буквам отсеевыем не подходящие
Нужно прятать штат в котором города не выбраны
<ul id="city-list">
    <li class="state">MARYLAND</li>
    <li class="city">Aberdeen</li>
    <li class="city">Danville</li>
    <li class="city">Kensington</li>
    <li class="city">Queenstown</li>
    
    <li class="state">VIRGINIA</li>
    <li class="city">Abingdon</li>
    <li class="city">Dublin</li>
    <li class="city">Linton Hall</li>
    <li class="city">Marshall</li>    

    <li class="state">WASHINGTON</li>
    <li class="city">Aberdeen</li>
    <li class="city">Easton</li>
    <li class="city">Lynnwood</li>
</ul>

$('#cityFilter').on('keyup', function () {
  var value = this.value;
  if (value != "") {
    $('#city-list li').hide().each(function () {
      if ($(this).not('.state').text().toLowerCase().search(value.toLowerCase()) > -1) {
        $(this).prevAll('.state').first().add(this).show();
        $('li.state').show();
      }
    });
  } else {
    $('#city-list li').show().each(function () {
        $(this).prevAll('.state').first().add(this).show();
        $('li.state').show();
    });
  }
});

.state {
  font-weight: bold;
}

Пример штат Virginia уже пустой и его нужно прятать
60edd3cd8e931358638485.png
https://jsfiddle.net/sergsagan/ofLj5uwa/
  • Вопрос задан
  • 59 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
$('#cityFilter').on('input', function() {
  const value = this.value.toLowerCase();

  $('#city-list .city')
    .hide()
    .filter((i, n) => $(n).text().toLowerCase().includes(value))
    .show();

  $('#city-list .state')
    .hide()
    .filter((i, n) => $(n).nextUntil('.state').is(':visible'))
    .show();
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы