搜索时隐藏元素<li>里面一个<ul>

Question

I have this code where I have an input and I can search for <li> elements inside a <ul> . It's working like a charm, however, I also have "button" (that will work as a title and accordion in the future) elements inside the same div as the <ul> and when I filter the <li> elements the button remains (obviously)

I want the button to also disappear when I hide the <li> elements that I don't want to see. For example, if I search for "Adele" I also want to hide the button "D TO F", since it's an element from a <ul> I'm not using, meaning I want all the div to disappear. (tried to be as clear as possible).

Any help would be appreciated! Code below:

 function myFunction() { var input, filter, ul, li, a, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); // get all of the li elements that are contained by "myUL" elements document.querySelectorAll(".myUL li") // iterate over them .forEach(l => l // toggle the "hidden" class on those li items that have .classList.toggle("hidden", // an anchor tag whose text includes the text typed into the textbox !l.querySelector("a").textContent.toUpperCase().includes(filter))); }

 .hidden { display: none; }

 <h2>My Phonebook</h2> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> <div class=hide-box> <button>A TO C</button> <ul class="myUL"> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> <li><a href="#">Anne</a></li> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> <li><a href="#">Calvin</a></li> <li><a href="#">Christina</a></li> <li><a href="#">Cindy</a></li> </ul> </div> <div class=hide-box> <button>D TO F</button> <ul class="myUL"> <li><a href="#">Daniel</a></li> <li><a href="#">Danielle</a></li> <li><a href="#">Ernest</a></li> <li><a href="#">Eric</a></li> <li><a href="#">Fabio</a></li> <li><a href="#">Ferdinand</a></li> <li><a href="#">Frederick</a></li> </ul> </div>

Answer 1

我会给与您要过滤的按钮文本/信息相关的父<div>的 id，并用您的过滤器隐藏整个 div。

Answer 2

One quick way to fix it is to insert the button to the list. Then on the iteration you need to change a to * - meaning all elements inside the list item.

Something like that:

 function myFunction() { var input, filter, ul, li, a, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); document.querySelectorAll(".myUL li") .forEach(l => l.classList.toggle("hidden",!l.querySelector("*").textContent.toUpperCase().includes(filter)));}

 .acoBtn { list-style: none} .hidden { display: none; }

 <h2>My Phonebook</h2> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> <div class=hide-box> <ul class="myUL"> <li class="acoBtn"><button>A TO C</button></li> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> <li><a href="#">Anne</a></li> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> <li><a href="#">Calvin</a></li> <li><a href="#">Christina</a></li> <li><a href="#">Cindy</a></li> </ul> </div> <div class=hide-box> <ul class="myUL"> <li class="acoBtn"><button>D TO F</button></li> <li><a href="#">Daniel</a></li> <li><a href="#">Danielle</a></li> <li><a href="#">Ernest</a></li> <li><a href="#">Eric</a></li> <li><a href="#">Fabio</a></li> <li><a href="#">Ferdinand</a></li> <li><a href="#">Frederick</a></li> </ul> </div>

Answer 3

Just add below snippet :

document.querySelectorAll(".hide-box")
    .forEach(d => d
    .classList.toggle("hidden",
            ([...d.querySelectorAll('.myUL li')]
        .every(l => l.classList.contains("hidden"))
      )
    )     
)

in your function making your complete function look like :

function myFunction() {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    // get all of the li elements that are contained by "myUL" elements
    document.querySelectorAll(".myUL li")
    // iterate over them 
      .forEach(l => l
      // toggle the "hidden" class on those li items that have
        .classList.toggle("hidden",
        // an anchor tag whose text includes the text typed into the textbox
          !l.querySelector("a").textContent.toUpperCase().includes(filter)));

// Code that checks if all li in the ul of a given div are hidden then hide entire div as well
   document.querySelectorAll(".hide-box")
        .forEach(d => d
        .classList.toggle("hidden",
                ([...d.querySelectorAll('.myUL li')]
            .every(l => l.classList.contains("hidden"))
          )
        )     
    )

}

Working Fiddle