Lucio
05 de Marzo del 2010
Tengo un script ajax que baje de internet, el cual lo utilizo en un autocompletar de un buscador hecho con PHP y MySQL. El script funciona perfecto, pero lo que no se como hacer es que el usuario pueda navegar por las opciones que aparecen en el autocompletar con las teclas arrowup y arrowdown (las flechitas).
No se casi nada de JS, pero por lo que me doy cuenta, creo que debería crear una función con los códigos de las teclas. Obviamente no lo se hacer. ¿Alguien me podría guiar un poco?
Gracias y saludos.
No hace falta saber mucho JS para esto, con un listener de teclado sobre el campo de texto y llevar un índice de «opción seleccionada» te vale.
La idea: guardas las opciones del autocompletar en un array (o las lees del DOM, si ya las estás pintando como una lista de <li>), y con un keydown mueves un índice hacia arriba o abajo, marcando visualmente cuál está seleccionada:
var indiceSeleccionado = -1;
campoTexto.addEventListener('keydown', function(e) {
var opciones = document.querySelectorAll('#lista-autocompletar li');
if (opciones.length === 0) return;
if (e.key === 'ArrowDown') {
indiceSeleccionado = (indiceSeleccionado + 1) % opciones.length;
} else if (e.key === 'ArrowUp') {
indiceSeleccionado = (indiceSeleccionado - 1 + opciones.length) % opciones.length;
} else if (e.key === 'Enter' && indiceSeleccionado >= 0) {
campoTexto.value = opciones[indiceSeleccionado].textContent;
return;
} else {
return; // otra tecla, no hacemos nada
}
opciones.forEach(function(op, i) {
op.classList.toggle('seleccionada', i === indiceSeleccionado);
});
});
Con la clase seleccionada le das el estilo resaltado en CSS (fondo distinto, por ejemplo). Un detalle importante: cada vez que el AJAX repinte la lista con resultados nuevos, resetea indiceSeleccionado a -1, si no la próxima flecha arriba/abajo empieza desde una posición que ya no existe.
Ivan