Estoy tratando de recuperar todos los li originales una vez que borre la entrada. El problema es que .value = '' borra la entrada pero el filtro aún se aplica.
Agradecería ayuda con esto, me está volviendo loco.
(Eliminé el CSS pero aún puedes tener una idea bastante buena, gracias)
var myInput = document.getElementById('myInput'); function myFunction() { var input, filter, ul, li, a, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName("li"); for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; txtValue = a.textContent || a.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } var h2 = document.getElementById('hh'); h2.addEventListener('click', clear); function clear() { myInput.value = ''; } <h2 id="hh">Click here to empty input</h2> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> <ul id="myUL"> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</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>El filtro en sí no se "aplica", son sus consecuencias las que se aplican.
Cuando mire su código, encontrará que, en un punto, configuró para display: none los <li> que no coincidían con su filtro.
Su función clear() restablece el valor de la entrada, sin revertir los cambios realizados en el <li> que hizo al aplicar display: none .
Debe hacer que su función clear() también elimine la display: none de todos los <li> almacenados en su matriz iterando a través de esa misma matriz e invirtiendo los cambios realizados en la propiedad de display .
const myInput = document.getElementById('myInput'); const ul = document.getElementById("myUL"); const list = ul.children function myFunction() { const input = document.getElementById("myInput"); const filter = input.value.toUpperCase(); for (i = 0; i < list.length; i++) { const a = list[i].getElementsByTagName("a")[0]; const txtValue = a.textContent || a.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { list[i].style.display = ""; } else { list[i].style.display = "none"; } } } var h2 = document.getElementById('hh'); h2.addEventListener('click', clear); function clear() { for(i = 0; i < list.length; i++) { list[i].style.display = ""; } myInput.value = ''; } En lugar de usar ul.getElementsByTagName("li") , debe usar como hice anteriormente ul.children , que almacena los hijos del padre seleccionado en una matriz, y los hijos de un <ul> son esencialmente todos <li> , asi que.
El código anterior funciona y borra el filtro como querías. Le recomendaría que no use var , solo const, let que eso evite muchos errores al manipular variables en todo su código en general. Por favor considérelos.