¿Cómo presionar el teclado hacia abajo o hacia arriba entre las “opciones” desplegables?

Question

Tengo un menú desplegable dinámico personalizado basado en ajax [div].

Tengo un cuadro [de entrada] que; onkeyup, ejecuta una búsqueda Ajax que devuelve resultados en divs y retroceden al usar innerHTML.Estos divTodos tienen aspectos destacados. onmouseover entonces, una búsqueda típica exitosa produce la siguiente estructura (perdón por el semicódigo):

[input]
 [div id=results] //this gets overwritten contantly by my AJAX function
  [div id=result1 onmouseover=highlight onclick=input.value=result1]
  [div id=result2 onmouseover=highlight onclick=input.value=result2]
  [div id=result2 onmouseover=highlight onclick=input.value=result2]
 [/div]

Funciona.

Sin embargo, me faltan las funciones importantes detrás de los elementos HTML normales.No puedo subir o bajar el teclado entre "opciones".

Sé que JavaScript maneja eventos de teclado pero;No he podido encontrar una buena guía.(Por supuesto, la pregunta de seguimiento terminará siendo:Puedo usar <ENTER> para desencadenar eso onclick ¿evento?)

Answer 1

Lo que hay que hacer es adjuntar detectores de eventos al div con id="results".Puedes hacer esto agregando onkeyup, onkeydown, etc.atributos a la div cuando lo creas o puedes adjuntarlos usando JavaScript.

Mi recomendación sería que utilices una biblioteca AJAX como Yui, jQuery, Prototipo, etc.por dos razones:

1. Parece que estás intentando crear un Autocompletar control que es algo que la mayoría de las bibliotecas AJAX deberían proporcionar.Si puede utilizar un componente existente, se ahorrará mucho tiempo.
2. Incluso si no desea utilizar el control proporcionado por una biblioteca, todas las bibliotecas proporcionan bibliotecas de eventos que ayudan a ocultar las diferencias entre las API de eventos proporcionadas por diferentes navegadores.

Olvídese de addEvent, utilice la utilidad de eventos de Yahoo! proporciona un buen resumen de lo que una biblioteca de eventos debería ofrecerle.Estoy bastante seguro de que las bibliotecas de eventos proporcionadas por jQuery, Prototype, et.Alabama.proporcionar características similares.

Si ese artículo se te pasa por la cabeza, echa un vistazo a esta documentación primero y luego volver a leer el artículo original (descubrí que el artículo tenía mucho más sentido después de usar la biblioteca de eventos).

Un par de cosas más:

• Usar JavaScript te da mucho más control que escribir onkeyup etc.atributos en su HTML.A menos que quieras hacer algo realmente simple Yo usaría JavaScript.
• Si escribe su propio código para manejar eventos de teclado, buena referencia de código clave es realmente útil.

Answer 2

Desde el principio, pensaría que necesitarías mantener algún tipo de estructura de datos en JavaScript que refleje los elementos de la lista desplegable actual.También necesitaría una referencia al elemento actualmente activo/seleccionado.

Cada vez keyup o keydown se activa, actualice la referencia al elemento activo/seleccionado en la estructura de datos.Para proporcionar información resaltada en la interfaz de usuario, agregue o elimine un nombre de clase con estilo mediante CSS según si el elemento está activo/seleccionado o no.

Además, esto no es gran cosa, pero innerHTML no es realmente estándar (ver createTextNode(), createElement(), y appendChild() para formas estándar de crear datos).Es posible que también desee ver cómo adjuntar controladores de eventos en JavaScript en lugar de hacerlo en un atributo HTML.