Faire des listes "Tabulables"
Bonjour,
La question est certes un peu vague mais l'objectif est assez concis, je cherche à faire une page sur laquelle il n'y a pas besoin du tout de la souris pour sélectionner un élément dans une liste.
Concrètement, j'ai un champ de saisie <input> qui a chaque frappe du clavier fait un appel ajax qui rapatrie la listes de tous les utilisateurs dont le nom commence par le contenu de l'input. Cette liste est affichée juste en dessous du champ de saisie et est mise à jour à chaque touches enfoncée. Cette partie là, c'est du JS, c'est fait, aucun problème.
Actuellement, le code HTML doit donner à peu près :
Code:
1
2
3
4
5
6
7
8
9
|
<input type="text" id="champ_recherche" /> <!-- ce champ la est statique, il n'est pas regénéré à chaque appel ajax -->
<div id="resultats"> <!-- le contenu de cette div est régénéré à chaque fois qu'on presse une touche dans #champ_recherche -->
<ol>
<li>Nom1 prenom1</li>
<li>nom2 prenom2</li>
...
</ol>
</div> |
Notez que le code est entièrement généré par JQuery, donc je ne peux pas faire de copier/coller du HTML
Mon problème, c'est qu'en étant dans le input, si j'appuie sur la touche tab, le focus ne va pas sur les éléments de la liste.
J'ai essayé de rajouter un tabindex sur les éléments de la liste, et là, la touche tab m'amène bien sur le 1er élément de la liste, mais après, impossible de naviguer entre les différents éléments de la liste, ni avec tab, ni avec les flèches.
Aussi, les <ol><li> sont-elles bien les balises dont j'ai besoin ? Le cas échéant, comment les rendre tabulable et dans le cas contraire, que faudrait-il plutôt utiliser ?
Je précise qu'a terme, mes listes devront contenir des balises HTML, ce qui rend impossible certaines astuces, comme par exemple l'utilisation d'un textarea.
En vous remerciant pour vos conseil.
