如何在子项过滤无结果时隐藏父级.char-section容器

我使用filter()和toggle()方法实现即时搜索功能，目前功能基本可用，但希望优化搜索结果：当某个.char-section父容器下的所有.item子项均因过滤无匹配结果而被隐藏时，隐藏整个.char-section容器。例如搜索banana时，当前效果仅隐藏无关子项，期望效果为隐藏无匹配的父容器。

现有实现代码如下：

JavaScript代码 #

$(document).ready(function () {
  $("#myInput").on("keyup", function () {
    var value = $(this).val().toLowerCase();
    $(".item").filter(function () {
      $(this).toggle(
        $(":is(.title)", this)
          .text()
          .toLowerCase()
          .includes(value.toLowerCase())
      );
    });
  });
});

CSS代码 #

body {
  margin: 30px;
}
form {
  margin-bottom: 10px;
}
.title {
  display: block;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 10px;
  font-size: 17px;
  line-height: 1.25em;
  font-weight: 700;
}
.char {
  position: absolute;
  left: 0%;
  top: 0%;
  right: auto;
  bottom: auto;
  z-index: 3;
  display: inline-block;
  margin-top: 20px;
  margin-bottom: 0px;
  margin-left: 2px;
  padding-top: 0px;
  padding-bottom: 0px;
  color: #036;
  font-size: 26px;
  line-height: 1em;
}
.item {
  position: relative;
  top: -20px;
  width: 100%;
  margin-top: 0px;
  margin-bottom: 10px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.list {
  position: relative;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: auto;
  width: 100%;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 2px 0px 2px 80px;
}
.char-section {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 30px 0px;
  border-bottom: 3px solid #ddd;
}

HTML代码 #

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>

<form>
<input type="search" placeholder="Quick Search" class="h-filter-search" id="myInput">
<input type="reset" id="reset-btn" value="Reset">
</form>

<div class="ab-wrapper">
  <div id="A" class="char-section">
    <h5 class="char">A</h5>
    <div class="list">
      <div class="item">
        <p class="title">Apple</p>
      </div>
      <div class="item">
        <p class="title">Apple Juice</p>
      </div>
      <div class="item">
        <p class="title">Avocado</p>
      </div>
    </div>
  </div>
  <div id="B" class="char-section">
    <h3 class="char">B</h3>
    <div class="list">
      <div class="item">
        <p class="title">Banana</p>
      </div>
      <div class="item">
        <p class="title">Boiled Eggs</p>
      </div>
      <div class="item">
        <p class="title">Bamboo Juice</p>
      </div>
    </div>
  </div>
  <div id="C" class="char-section">
    <h3 class="char">C</h3>
    <div class="list">
      <div class="item">
        <p class="title">Candy</p>
      </div>
    </div>
  </div>
  <div id="D" class="char-section">
    <h3 class="char">D</h3>
    <div class="list">
      <div class="item">
        <p class="title">Disco</p>
      </div>
      <div class="item">
        <p class="title">Decaffeinated Juice</p>
      </div>
    </div>
  </div>
  <div id="E" class="char-section">
    <h3 class="char">E</h3>
    <div class="list"></div>
  </div>
  <div id="F" class="char-section">
    <h3 class="char">F</h3>
    <div class="list">
      <div class="item">
        <p class="title">Decaffeinated Juice</p>
      </div>
    </div>
  </div>
</div>

修改JavaScript代码，在完成子项的显示/隐藏逻辑后，遍历所有.char-section容器，检查容器内是否存在可见的.item元素，以此决定是否隐藏该容器。同时顺便修复重置按钮的功能，使其能恢复所有内容的显示。

修改后的JavaScript代码 #

$(document).ready(function () {
  // 即时搜索逻辑
  $("#myInput").on("keyup", function () {
    var value = $(this).val().toLowerCase();
    // 遍历每个item，根据匹配结果切换显示状态
    $(".item").each(function () {
      const isMatch = $(this).find(".title").text().toLowerCase().includes(value);
      $(this).toggle(isMatch);
    });

    // 处理父容器的显示/隐藏
    $(".char-section").each(function () {
      // 检查当前容器下是否有可见的item
      const hasVisibleItem = $(this).find(".item:visible").length > 0;
      $(this).toggle(hasVisibleItem);
    });
  });

  // 修复重置按钮功能
  $("#reset-btn").on("click", function (e) {
    e.preventDefault(); // 阻止表单默认重置行为
    $("#myInput").val(""); // 清空搜索输入框
    // 恢复所有item和char-section的显示状态
    $(".item").show();
    $(".char-section").show();
  });
});

逻辑说明 #

• 将原代码中的filter()替换为each()：filter()用于筛选元素集合，而此处需要遍历每个.item单独处理显示状态，each()更贴合需求。
• 父容器判断逻辑：使用:visible选择器统计当前.char-section下可见的.item数量，若数量为0则隐藏容器，否则显示。
• 重置按钮修复：阻止表单默认重置行为，手动清空输入框并恢复所有元素的显示状态，解决原按钮仅清空输入但不恢复页面内容的问题。

内容的提问来源于stack exchange，提问作者Anthony