jquery для фильтра поиска - если поиск не совпадает, опция скрыта, но optgroup все еще отображается, как скрыть optgroup

Question

При поиске, если совпадений нет, опция скрывается, но optgroup по-прежнему отображается, даже если ни один дочерний параметр не подходит.Как я могу скрыть optgroup, если ни одна опция не соответствует?

Я пытался работать над этим, вот мой код, который я попробовал: jsfiddle

$("#uniAddressSearch").on("keyup", function (){
   var value = $(this).val().toLowerCase();
     $("#u-address option").filter(function (){
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
     });
});

// &&

$("#u-address option").each(function() {
  $(this).attr("data-search-term", $(this).text().toLowerCase());
});

$("#uniAddressSearch").on("keyup", function() {
  var searchTerm = $(this).val().toLowerCase();

  $("#u-address option").each(function() {
    if ($(this).filter("[data-search-term *= " + searchTerm + "]").length > 0 || searchTerm.length < 1) {
      $(this).show();
    } else {
      $(this).hide();
    }
  }); //end Option each    
}); //end search

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="address-listing">
    <input type="text" name="addressSearch" id="uniAddressSearch" placeholder="Select Location(s) Individually" class="form-control" />
    </div>
    <div class="u-address-fields">
      <select size="15" multiple="multiple" class="show" id="u-address">
       <optgroup class="og-swe" label="Swedish Cars">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
       </optgroup>
       <optgroup class="og-ger" label="German Cars">
         <option value="mercedes">Mercedes</option>
         <option value="audi">Audi</option>
         <option value="bmw">BMW</option>
       </optgroup>
       <optgroup  class="og-ita" label="Italian Cars">
         <option value="ferrari">Ferrari</option>
         <option value="lamborghini">Lamborghini</option>
       </optgroup>
     </select>
    </div>

Answer 1

изменить эту часть кодов,

С:

$("#u-address option").each(function() {
if ($(this).filter("[data-search-term *= " + searchTerm + "]").length > 0 || searchTerm.length < 1) {
  $(this).show();
} else {
  $(this).hide();
}  }); //end Option each   

До:

$("#u-address optgroup").show();
$("#u-address option").each(function() {
if ($(this).filter("[data-search-term *= " + searchTerm + "]").length > 0 || searchTerm.length < 1) {
  $(this).show();
} else {
  $(this).hide();
  var count = $(this).parent("optgroup").find("option:visible").length;
  if(count == 0)
    $(this).parent("optgroup").hide();
}  }); //end Option each   

Answer 2

Вы можете добавить новое условие, чтобы проверить длину отображаемых / скрытых <option>.Вы можете сохранить счетчик для этого, и он отлично работает, как вы ожидаете:

$("#uniAddressSearch").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  $("#u-address option").filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
  });
});



$("#u-address option").each(function() {
  $(this).attr("data-search-term", $(this).text().toLowerCase());
});

$("#uniAddressSearch").on("keyup", function() {
  var searchTerm = $(this).val().toLowerCase();
  var optionCount = $('#u-address option').length;
  $("#u-address option").each(function() {
    if ($(this).filter("[data-search-term *= " + searchTerm + "]").length > 0 || searchTerm.length < 1) {
      $(this).show();
      optionCount++;
      $("#u-address").show();
    } else {
      $(this).hide();
      optionCount--;
      if(optionCount === 0){
        $("#u-address").hide();
      }
    }
  }); //end Option each    
}); //end search

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="address-listing">
  <input type="text" name="addressSearch" id="uniAddressSearch" placeholder="Select Location(s) Individually" class="form-control" />
</div>
<div class="u-address-fields">
  <select size="15" multiple="multiple" class="show" id="u-address">
    <optgroup class="og-swe" label="Swedish Cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
    </optgroup>
    <optgroup class="og-ger" label="German Cars">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
      <option value="bmw">BMW</option>
    </optgroup>
    <optgroup  class="og-ita" label="Italian Cars">
      <option value="ferrari">Ferrari</option>
      <option value="lamborghini">Lamborghini</option>
    </optgroup>
  </select>
</div>