Tengo una lista de elementos que me gustaría filtrar, en este momento todos los elementos están visibles, pero ¿cómo puedo hacer que los resultados solo se muestren cuando un usuario escribe un nombre?
Intenté cambiar el li para que sea un block , pero funcionó.
li[i].style.display = "none";Soy nuevo en JS y actualmente estoy haciendo algunos cursos.
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"; } } } * { box-sizing: border-box; } #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 12px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #myUL { list-style-type: none; padding: 0; margin: 0; } #myUL li a { border: 1px solid #ddd; margin-top: -1px; /* Prevent double borders */ background-color: #f6f6f6; padding: 12px; text-decoration: none; font-size: 18px; color: black; display: block } #myUL li a:hover:not(.header) { background-color: #eee; } <h2>Car Directory</h2> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Cars" title="Type in a name"> <ul id="myUL"> <li><a href="#">Volvo</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Mazda</a></li> <li><a href="#">Toyota</a></li> <li><a href="#">Yamaha</a></li> <li><a href="#">Honda</a></li> <li><a href="#">Dodge</a></li> </ul>Aquí está mi bolígrafo: https://codepen.io/emmabbb/pen/wvrpqbp
Asegúrate de que el cuadro de búsqueda no esté vacío agregando un filter a la instrucción if:
if (filter && txtValue.toUpperCase().indexOf(filter) > -1) y llame a su función después de definirla: myFunction()
** TAMBIÉN: para su caso de uso, creo que usar el evento de input sería mejor que keyup
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 (filter && txtValue.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } myFunction() * { box-sizing: border-box; } #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 12px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #myUL { list-style-type: none; padding: 0; margin: 0; } #myUL li a { border: 1px solid #ddd; margin-top: -1px; /* Prevent double borders */ background-color: #f6f6f6; padding: 12px; text-decoration: none; font-size: 18px; color: black; display: block } #myUL li a:hover:not(.header) { background-color: #eee; } <h2>Car Directory</h2> <input type="text" id="myInput" oninput="myFunction()" placeholder="Search for Cars" title="Type in a name"> <ul id="myUL"> <li><a href="#">Volvo</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Mazda</a></li> <li><a href="#">Toyota</a></li> <li><a href="#">Yamaha</a></li> <li><a href="#">Honda</a></li> <li><a href="#">Dodge</a></li> </ul>Puede hacer esto solo con HTML, sin JavaScript.
<h2>Car Directory</h2> <input list="cars" placeholder="Search for Cars"> <datalist id="cars"> <option value="Volvo"> <option value="BMW"> <option value="Mazda"> <option value="Toyota"> <option value="Yamaha"> <option value="Honda"> <option value="Dodge"> </datalist>Inicialmente puede ocultar la lista. Tan pronto como se ingresa algo, puede eliminar la clase oculta.
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"); if (input.value.length > 0) { ul.classList.remove('hide'); } else { ul.classList.add('hide'); } 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"; } } } * { box-sizing: border-box; } #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 12px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #myUL { list-style-type: none; padding: 0; margin: 0; } .hide { display: none; } #myUL li a { border: 1px solid #ddd; margin-top: -1px; /* Prevent double borders */ background-color: #f6f6f6; padding: 12px; text-decoration: none; font-size: 18px; color: black; display: block } #myUL li a:hover:not(.header) { background-color: #eee; } <h2>Car Directory</h2> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Cars" title="Type in a name"> <ul id="myUL" class="hide"> <li><a href="#">Volvo</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Mazda</a></li> <li><a href="#">Toyota</a></li> <li><a href="#">Yamaha</a></li> <li><a href="#">Honda</a></li> <li><a href="#">Dodge</a></li> </ul>