Javascript如何过滤包含类别和子类别的列表

Question

更新（2019 年 11 月）： 就像下面提到的 @Austin T French 一样，关键是确保通过例如 class 来区分（即分组）国家/地区。更新的代码 sn-p 添加在下面！

---

在下面的代码中是否可以过滤“国家”（子类别）列表，以便“大陆”（父类别）也过滤？

例如，如果我搜索“中国”，我希望同时在其上方添加“亚洲”过滤器。

下一步，我还希望在搜索“父类别”时显示“子类别”。例如，在搜索“亚洲”时，我想要过滤“中国”、“日本”和“韩国”。

或者创建一个包含两列的过滤表会更实用吗？

function filterCountries() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("search-country");
  filter = input.value.toUpperCase();
  ul = document.getElementById("country-list");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

<h2>Countries</h2>

<input type="text" id="search-country" onkeyup="filterCountries()" placeholder="Search for countries.." title="Type in a country">

<ul id="country-list">
  <li><a href="#"><strong>Asia</strong></a></li>
  <li><a href="#">China</a></li>
  <li><a href="#">Japan</a></li>
  <li><a href="#">South Korea</a></li>

  <li><a href="#"><strong>Europe</strong></a></li>
  <li><a href="#">France</a></li>
  <li><a href="#">Germany</a></li>
  <li><a href="#">United Kingdom</a></li>

  <li><a href="#"><strong>North America</strong></a></li>
  <li><a href="#">Canada</a></li>
  <li><a href="#">Mexico</a></li>
  <li><a href="#">United States</a></li>

  <li><a href="#"><strong>South America</strong></a></li>
  <li><a href="#">Argentina</a></li>
  <li><a href="#">Brazil</a></li>
  <li><a href="#">Chile</a></li>
</ul>

---

更新代码（2019 年 11 月）

function filterCountries() {
  const input = document.getElementById("search-country");
  const filter = input.value.toUpperCase();
  const li = document.querySelectorAll("li");
  for (let i = 0; i < li.length; i++) {
    const a = li[i].getElementsByTagName("a")[0];
    if (a.textContent.toUpperCase().indexOf(filter) > -1) {
      document.getElementsByClassName(li[i].className)[0].style.display = "";
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

<h2>Countries</h2>

<input type="text" id="search-country" onkeyup="filterCountries()" placeholder="Search 
for countries.." title="Type in a country">

<ul class="country-list">
  <li class="asia"><a href="#"><strong>Asia</strong></a></li>
  <li class="asia"><a href="#">China</a></li>
  <li class="asia"><a href="#">Japan</a></li>
  <li class="asia"><a href="#">South Korea</a></li>

  <li class="europe"><a href="#"><strong>Europe</strong></a></li>
  <li class="europe"><a href="#">France</a></li>
  <li class="europe"><a href="#">Germany</a></li>
  <li class="europe"><a href="#">United Kingdom</a></li>

  <li class="north-am"><a href="#"><strong>North America</strong></a></li>
  <li class="north-am"><a href="#">Canada</a></li>
  <li class="north-am"><a href="#">Mexico</a></li>
  <li class="north-am"><a href="#">United States</a></li>

  <li class="south-am"><a href="#"><strong>South America</strong></a></li>
  <li class="south-am"><a href="#">Argentina</a></li>
  <li class="south-am"><a href="#">Brazil</a></li>
  <li class="south-am"><a href="#">Chile</a></li>
</ul>

Answer 1

您目前没有任何实际的方法来区分区域。我会在 HTML 中添加一个属性，并可选择从中选择：

function ShowAsia(){
  $(".asia").toggle();
}

function ShowEurope(){
  $(".europe").toggle();
}

li {list-style:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#" class='asia' style="display: inline;">China</a></li>
<li><a href="#" class='asia' style="display: inline;">Japan</a></li>
<li><a href="#" class='asia' style="display: inline;">South Korea</a></li>

<li><a href="#" class='europe' style="display: inline;">France</a></li>
<li><a href="#" class='europe' style="display: inline;">Germany</a></li>
<li><a href="#" class='europe' style="display: inline;">United Kingdom</a></li>

</ul>

<button type="button" onclick='ShowAsia()'>Show Asia</button>
<button type="button" onclick='ShowEurope()'>Show Europe</button>