Faire des listes "Tabulables"

**comode** · 03/07/2014, 16h20

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Bovino** · 03/07/2014, 16h28

Si tu utilises jQuery, j'imagine que tu t'aides de UI et autocomplete.
Si c'est le cas, la gestion des touches directionnelles du clavier sont gérées correctement.

**comode** · 03/07/2014, 17h05

Non, je n'utilise pas JQuery UI pour ça.

Ma recherche est avancée, donc il y a pas mal de check/radio qui seront associés (qui eux n'ont pas de problèmes avec la tabulation), certain appliquant le filtre au niveau serveur, d'autre au niveau JS, et le nombre d'éléments n'autorise en aucun cas de pré-charger la liste (d'ailleurs, je n'active la recherche qu'a partir de 2 caractères minimum).