Comment taper vers le bas ou vers le haut entre les « options » déroulantes ?
-
08-06-2019 - |
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 div
s et sont attirés par l'utilisation innerHTML
.Ces div
ils 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?)
La solution
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 :
- 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.
- 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.
Autres conseils
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.