Javascript如何过滤带有类别和子类别的列表

Question

UPDATE (Nov 2019): Like @Austin T French mentioned below, the key is to make sure to differentiate (ie. group) the countries by class for example. Updated code snippet added below!

---

In the code below is it possible to filter the list of "countries" (subcategories) so that the "continent" (parent category) filters as well?

For example if I search "China" I want to have "Asia" filter above it at the same time.

As a next step I'd also like to have the "subcategories" display when search for the "parent categories". For example, when searching for "Asia" I want to have "China", "Japan", and "South Korea" to filter.

Or would this be more practical to create a filtered table with two columns?

 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>

---

UPDATED CODE (Nov 2019)

 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

You don't currently have any actual method to differentiate regions. I'd add a property to the HTML and optionally select off of that:

 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>