Javascript clavier d'amorces? (Ou plutôt: me aider avec mon menu déroulant personnalisé)

Question

je besoin d'aide pour finir mon ajax construit sur mesure [div] sur la base de la liste déroulante dynamique.

Fondamentalement, j'ai une zone [entrée] qui; onkeyup, exécute une recherche Ajax qui retourne un tas de résultats dans div s et sont tirés en arrière dans l'utilisation innerHTML. Ces div s ont tous les faits saillants onmouseover donc, une recherche typique réussie cède la structure suivante (pardonnez le demi-code):

[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] 

Il fonctionne .. magnifiquement! semble élégant et est beaucoup plus complet que n'importe quelle liste déroulante régulière (ces résultats div apportent beaucoup d'informations).

Cependant, je manque la plupart des fonctions importantes derrière les éléments HTML réguliers, qui est, je ne peux pas le clavier vers le bas ou vers le haut entre les « options ». Comment puis-je faire cela? Je sais que javascript gère les événements de clavier mais; Je n'ai pas réussi à trouver un bon guide sur la façon de le faire. (Bien sûr, la question de suivi à cette fin finira par être: puis-je utiliser <ENTER> pour déclencher cet événement onclick?)

Answer 1

Ce que vous devez faire est d'attacher des écouteurs d'événement au div avec id="results". Vous pouvez le faire en ajoutant onkeyup, onkeydown, etc. attribue à l'div lorsque vous créez ou vous pouvez joindre ces JavaScript à l'aide.

Ma recommandation serait que vous utilisez une bibliothèque AJAX comme YUI, jQuery, Prototype, etc., pour deux raisons:

1. On dirait que vous essayez de créer un contrôle Auto Complete qui est quelque chose la plupart AJAX d'abord des bibliothèques devrait fournir. Si vous pouvez utiliser un composant existant, vous économiserez beaucoup de temps.
2. Même si vous ne voulez pas utiliser le contrôle fourni par une bibliothèque, toutes les bibliothèques offrent des bibliothèques d'événements qui aident à masquer les différences entre les API d'événements fournis par les différents navigateurs.

Forget addEvent, use Yahoo!’s Event Utility fournit un bon résumé de ce qu'une bibliothèque d'événements devrait vous fournir. Je suis sûr que les bibliothèques d'événements fournies par jQuery, Prototype, et. Al. fournir des fonctionnalités similaires. Si cet article passe au-dessus de votre tête, jetez d'abord un coup d'œil à this documentation puis relisez l'article original (j'ai trouvé l'article beaucoup plus logique après avoir utilisé la bibliothèque d'événements).

Quelques autres:

• vous donne L'utilisation de JavaScript contrôle beaucoup plus que l'écriture onkeyup etc. attributs dans votre code HTML. Sauf si vous voulez faire quelque chose vraiment simple Je voudrais utiliser JavaScript.
• Si vous écrivez votre propre code pour gérer les événements clavier, un good key code reference est vraiment pratique.

Answer 2

En tête, je pense que vous auriez besoin de garder une certaine forme d'une structure de données dans le JavaScript qui reflète les éléments de la liste déroulante en cours. Vous aurez également besoin d'une référence à l'élément actuellement actif/sélectionné.

Chaque fois que keyup ou keydown est déclenché, mettez à jour la référence à l'élément actif/sélectionné dans la structure de données. Pour fournir des informations de mise en évidence sur l'interface utilisateur, ajoutez ou supprimez un nom de classe qui est stylisé via CSS selon si l'élément est actif/sélectionné ou non.

En outre, ce n'est pas un gros problème, mais innerHTML est vraiment standard (regarder dans createTextNode(), createElement() et appendChild() des moyens standard de création de données) non. Vous souhaiterez peut-être également ajouter des gestionnaires d'événements au JavaScript plutôt que de le faire dans un attribut HTML.