Comment taper vers le bas ou vers le haut entre les « options » déroulantes ?

Question

J'ai une liste déroulante dynamique basée sur ajax [div] personnalisée.

J'ai une boîte de saisie [saisie] qui ; onkeyup, exécute une recherche Ajax qui renvoie les résultats dans divs et sont attirés par l'utilisation innerHTML.Ces divils ont tous des points forts onmouseover ainsi, une recherche réussie typique donne la structure suivante (pardonnez le semi-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]

Ça marche.

Cependant, il me manque les fonctions importantes derrière les éléments HTML classiques.Je ne peux pas taper vers le bas ou vers le haut entre les "options".

Je sais que javascript gère les événements du clavier mais ;Je n'ai pas réussi à trouver un bon guide.(Bien sûr, la question complémentaire finira par être :puis-je utiliser <ENTER> pour déclencher ça onclick événement?)

Answer 1

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

Ma recommandation serait d'utiliser une bibliothèque AJAX comme YUI, jQuery, Prototype, etc.pour deux raisons :

1. On dirait que vous essayez de créer un Saisie automatique contrôle qui est quelque chose que la plupart des bibliothèques AJAX devraient fournir.Si vous pouvez utiliser un composant existant, vous gagnerez beaucoup de temps.
2. Même si vous ne souhaitez pas utiliser le contrôle fourni par une bibliothèque, toutes les bibliothèques fournissent des bibliothèques d'événements qui permettent de masquer les différences entre les API d'événements fournies par les différents navigateurs.

Oubliez addEvent, utilisez l'utilitaire d'événements de Yahoo! fournit un bon résumé de ce qu'une bibliothèque d'événements devrait vous offrir.Je suis presque sûr que les bibliothèques d'événements fournies par jQuery, Prototype, et.Al.offrent des fonctionnalités similaires.

Si cet article vous dépasse, jetez un oeil à ce document d'abord, puis relisez l'article original (j'ai trouvé que l'article avait beaucoup plus de sens après avoir utilisé la bibliothèque d'événements).

Quelques autres choses :

• L'utilisation de JavaScript vous donne beaucoup plus de contrôle que l'écriture onkeyup etc.attributs dans votre HTML.A moins que tu veuilles faire quelque chose vraiment simple J'utiliserais JavaScript.
• Si vous écrivez votre propre code pour gérer les événements du clavier, bonne référence du code clé est vraiment pratique.

Answer 2

De mémoire, je pense que vous auriez besoin de conserver une certaine forme de structure de données dans JavaScript qui reflète les éléments de la liste déroulante actuelle.Vous auriez également besoin d'une référence à l'élément actuellement actif/sélectionné.

Chaque fois 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 stylisé via CSS en fonction du fait que l'élément est actif/sélectionné ou non.

De plus, ce n'est pas grave, mais innerHTML n'est pas vraiment standard (regardez createTextNode(), createElement(), et appendChild() pour les méthodes standard de création de données).Vous souhaiterez peut-être également envisager d'attacher des gestionnaires d'événements dans JavaScript plutôt que de le faire dans un attribut HTML.