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

Question

[sergey]

Есть список штатов и городов, фильтруем города, по первым введенным буквам отсеевыем не подходящие
Нужно прятать штат в котором города не выбраны

<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 уже пустой и его нужно прятать

https://jsfiddle.net/sergsagan/ofLj5uwa/

Comments

[Mesuti]

Я бы предложил не изгаляться на JavaScript и сделать в html нормальную вложенность.
Где у каждого штата есть дочерний список городов

[sergey]

Mesuti, это приходит с бекенда а точнее в Redis храниться

Answer 1

[0xD34F]

$('#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();
});

или

document.querySelector('#cityFilter').addEventListener('input', e => {
  const value = e.target.value.toLowerCase();

  document.querySelectorAll('#city-list li').forEach(function(n) {
    if (n.matches('.state')) {
      this.splice(0, 2, n, true);
    } else {
      const hide = n.textContent.toLowerCase().indexOf(value) === -1;
      this[1] &&= hide;
      n.classList.toggle('hidden', hide);
      if (!n.nextElementSibling?.matches('.city')) {
        this[0].classList.toggle('hidden', this[1]);
      }
    }
  }, [ null, true ]);
});

Comments

[sergey]

Благодарю!