javascript - navegacion - menu responsive

Javascript teclado eventos primer?(o más bien: ayúdame con mi menú desplegable personalizado)

Question

Necesito ayuda para terminar mi menú desplegable dinámico basado en ajax [div] personalizado.

Básicamente, tengo un cuadro [input] que; onkeyup , ejecuta una búsqueda Ajax que devuelve un montón de resultados en div s y se vuelven a dibujar usando innerHTML . Todos estos div tienen aspectos destacados en el uso, por lo que 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 ... ¡maravillosamente! se ve elegante y es mucho más completo que cualquier menú desplegable normal (esos resultados div traen mucha información).

Sin embargo, me faltan la mayoría de las funciones importantes detrás de los elementos HTML comunes, es decir, no puedo avanzar o retroceder el teclado entre las "opciones". ¿Cómo hago esto? Sé que javascript maneja eventos de teclado pero; No he podido encontrar una buena guía sobre cómo hacer esto. (Por supuesto, la pregunta de seguimiento eventualmente terminará siendo: ¿puedo usar <ENTER> para activar ese evento onclick ?)

Answer 1

Lo que debe hacer es adjuntar detectores de eventos al div con id="results" . Puede hacer esto agregando onkeyup , onkeydown , etc. al div al crearlo o puede adjuntarlos usando JavaScript.

Mi recomendación sería que use una biblioteca AJAX como YUI , jQuery , Prototype , etc. por dos razones:

1. Parece que estás intentando crear un control Auto Complete , que es algo que la mayoría de las librerías AJAX deberían proporcionar. Si puede usar 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, use la utilidad de eventos de Yahoo! Proporciona un buen resumen de lo que una biblioteca de eventos debería proporcionarle. Estoy bastante seguro de que las bibliotecas de eventos proporcionadas por jQuery, Prototype, et. Alabama. proporcionar características similares.

Si ese artículo pasa por alto su cabeza, eche un vistazo a esta documentación primero y luego vuelva a leer el artículo original (el artículo me pareció mucho más lógico después de haber utilizado la biblioteca de eventos).

Un par de otras cosas:

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

Answer 2

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

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

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