Estoy usando javascript para crear una lista desplegable emergente con un cuadro de búsqueda. Es idéntico al que se describe al final de este artículo de w3schools.com: How TO - Search/Filter Dropdown
Funciona bien con el mouse, pero también me gustaría poder usar las teclas de flecha para subir/bajar en la lista filtrada y luego seleccionar el elemento con la tecla Intro.
Inicialmente intenté capturar el evento de pulsación de tecla y luego mover el mouse hacia arriba/abajo la cantidad adecuada, pero parece imposible. Así que no sé cómo usar las teclas de flecha en el cuadro de filtro para cambiar el resaltado en el menú desplegable flotante y luego hacer clic en el enlace.
Daría la bienvenida a cualquier sugerencia. Gracias.
He encontrado la respuesta a mi propia pregunta (a menudo el camino).
Habiéndome dado cuenta de que no puedo hacer que JavaScript mueva el mouse (no permitido), mi solución es tener una variable global (llamada "elemento") que contenga el número de índice del elemento resaltado actualmente. Luego capturo las pulsaciones de las teclas de flecha para resaltar el siguiente elemento de la lista hacia arriba/abajo (recordando quitar el resaltado del elemento anterior). Y la tecla Enter activa el enlace para el elemento resaltado actualmente.
Aquí está trabajando en JS Fiddle
Este es el JavaScript que agregué al código original:
//Additional key press code starts here document.getElementById("myInput").addEventListener("keydown", function (e) {CheckArrrow(e.keyCode);}); var item = 0; //global var holding current highlit item function CheckArrrow(e) { div = document.getElementById("myDropdown"); a = div.getElementsByTagName("a"); item_original = item; if (e==40) { //Down arrow item++; while (item<a.length && a[item].style.display=="none") { item++; //find next visible element } if (item>=a.length) { item = item_original; } else { //unhighlight old selection, highlight new selection a[item_original].style.backgroundColor = ""; a[item].style.backgroundColor = "#ddd"; console.log(a[item].innerText); } } if (e==38) { //Up arrow item--; while (item>=0 && a[item].style.display=="none") { item--; //find next visible element } if (item<0) { item = item_original; } else { //unhighlight old selection, highlight new selection a[item_original].style.backgroundColor = ""; a[item].style.backgroundColor = "#ddd"; console.log(a[item].innerText); } } if (e==13) { //Enter key link = a[item].href; console.log("Going to " + link); window.location.href = link; //go to link } }