¿Alguien puede corregir este script js? Cuando busco "palabra clave2" o "palabra clave3", muestra los elementos de la lista y sus hijos que contienen estas palabras clave, pero también muestra los hermanos y sus hijos que contienen diferentes palabras clave, por ejemplo, "palabra clave4" o "palabra clave5". Creo que el problema está dentro de las últimas 5 líneas de JS. También puede hacer que el script no distinga entre mayúsculas y minúsculas. Gracias.
const $input = document.querySelector("#myInput"); $input.addEventListener("input", (e) => { const query = e.target.value; const $ul = document.querySelector("ul"); const $lis = $ul.querySelectorAll("li"); const $matchedLis = [...$lis].filter(($li) => $li.textContent.match(query)); [...$lis].forEach(($li) => $li.classList.add("hide")); [...$matchedLis].forEach(($li) => { $li.classList.remove("hide"); [...$li.querySelectorAll("li")].map(($li) => $li.classList.remove("hide")); }); }); .hide { display: none; } <html> <body> <input type="text" id="myInput" placeholder="Search through notes" title="Type in a keyword"> <ul id="List"> <li> Parent 1 keyword1 <ul> <li> Child keyword2 <ul> <li>"Grand" Child keyword3</li> </ul> </li> <li> Child keyword4 <ul> <li>"Grand" Child keyword5</li> </ul> </li> </ul> </li> <li> Parent 2 keyword6 <ul> <li> Child keyword7 <ul> <li>"Grand" Child keyword8</li> </ul> </li> <li> Child keyword9 <ul> <li>"Grand" Child keyword10</li> </ul> </li> </ul> </li> </ul> </body> </html>