0
229
ViewsCómo hacer que mi autocompletado se muestre después de escribir una letra o palabra
En este momento, todas mis palabras se muestran incluso antes de que empieces a escribir. Me gustaría que las palabras se muestren después de comenzar a escribir. Estoy pensando en cómo hacer que las palabras permanezcan ocultas hasta que comiences a escribir una letra y luego filtra los resultados según lo que escribas.
<h2>My Phonebook</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> <script> 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"; } } } </script> css * { 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) {color de fondo: #eee; }
·
Juan Pablo Isaza
2 answers
Answer question0
Primero, para ocultar desde el principio, CSS puro
#myUL li { display: none } Luego, al escribir con él, nunca se oculta (si no tiene el CSS anterior) porque no configura nada en display cuando hay una coincidencia li[i].style.display = "" , cambie a li[i].style.display = "block" y prueba si input.value tiene una longitud como esta:
li[i].style.display = input.value.length && txtValue.toUpperCase().indexOf(filter) > -1 ? "block" : "none"; también está buscando texto dentro de a , no es necesario, puede buscar texto en el li
function myFunction() { const input = document.getElementById("myInput"); const filter = input.value.toUpperCase(); const ul = document.getElementById("myUL"); const li = ul.getElementsByTagName("li"); for (i = 0; i < li.length; i++) { const txtValue = li[i].textContent || li[i].innerText; li[i].style.display = input.value.length && txtValue.toUpperCase().indexOf(filter) > -1 ? "block" : "none"; } } myInput.addEventListener('keyup', 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 { 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>My Phonebook</h2> <input type="text" id="myInput" 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>
·
Juan Pablo Isaza
Report
0
Puede lograr esto ocultando inicialmente la lista y luego verificando la longitud de su variable de entrada. Si la longitud es mayor que cero, agregue una clase show . De lo contrario, elimine la clase nuevamente. En Vanilla JS, puede hacer esto accediendo a los elementos classList .
function myFunction() { var input, filter, ul, li, a, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); ul = document.getElementById("myUL"); if (filter.length > 0) { ul.classList.add('show'); 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"; } } } else { ul.classList.remove('show'); } } * { 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; display: none; } #myUL.show { display: block; } #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>My Phonebook</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>
·
Juan Pablo Isaza
Report
Answer question