Parcourir une liste pucée avec les touches directionnelles

Version imprimable

Bonjour à tous, j'ai une liste qui s'affiche lorsqu'on click sur un champ texte.
On peut sélectionner une valeur de la liste en clickant dessus, mais il serait plus pratique de pouvoir le faire aussi avec les touches directionnelles et la touche entrer pour valider (mais bon ça j'ai une petite idée).

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<!DOCTYPE HTML>
<html>
   <head>
   <title>Untitled</title>
   <meta charset="utf-8">
   <style type="text/css">
#liste{
  position:absolute;
  left:5px;
  top:18px;
}
#element_liste{
  width:133px;
  background:#FFFFFF;
  list-style-type:none;
  cursor:pointer;
}
#element_liste:hover{
  background:#6495ED;
}
   </style>
<script>
function afficher_villes()
{
  document.getElementById("liste").style.display = "block";
 
}
function cacher_ville()
{
  document.getElementById("liste").style.display = "none";
}
function valider(valeur)
{
  document.getElementById("formulaire").ville.focus();
  document.getElementById("formulaire").ville.value = valeur;
  document.getElementById("liste").style.display = "none";
}
</script>
   </head>
<body>
<form id="formulaire" action="#" method="get">
   Ville
   <input type="text" name="ville" value="" onfocus="afficher_villes()" onblur="cacher_ville()" autocomplete="off"/>
   <input name="boutton" type="submit" value="Envoyer">
   </form>
      <ul id="liste">
     <li id="element_liste" onmousedown="valider('Paris')">Paris</li>
     <li id="element_liste" onmousedown="valider('Marseillan')">Marseillan</li>
     <li id="element_liste" onmousedown="valider('Agde')">Agde</li>
     <li id="element_liste" onmousedown="valider('Cap d\'Agde')">Cap d'Agde</li>
     <li id="element_liste" onmousedown="valider('Beziers')">Beziers</li>
   </ul>
   <script>
   cacher_ville();
   </script>
</body>
</html>

Merci d'avance.

11/04/2013, 18h10
Kaamo

Plutôt que de réinventer la roue, que dirais-tu de tester autocomplete de jQuery UI ?

Sinon si tu veux rester pure JS :
- Tu dois obligatoirement nommer tes id différemment. (ici element_liste)
- Il suffit d'écouter l'événement onkeypress effectuer sur ton champ de formualire et d'agir en fonction selon la touche pressée (code 40 pour flèche bas, code 38 pour flèche haut)
11/04/2013, 18h15
SylvainPV

A noter que cela existe maintenant en pur HTML5.
11/04/2013, 19h48
hukiro

Une fois que j'ai récupéré la touche flèche du bas, impossible de placer le curseur sur un élément de la liste

Code:

document.getElementById("element_liste0").focus();

ou

Code:

document.getElementById("element_liste0").selected=true;

C'est vrai que c'est tentant d'utiliser HTML5
12/04/2013, 09h32
Kaamo

Le focus() sur un élément HTML est différent selon les navigateurs. Tu peux l'appliquer, selon la spéc W3C, sur ces types : HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement et HTMLAnchorElement. Pas sur les éléments li, donc. Par contre, ça a l'air de fonctionner pour un lien. Il va falloir ruser avec le CSS également. Bref, je pense que tu t'embarques dans un bon casse-tête. Peut-être que c'est préférable d'utiliser ce qui existe déjà.

Comme l'a mentionné Sylvain, tu peux utiliser les datalist HTML5 en utilsant un polyfill pour les anciens navigateurs (Webshims ou jQuery datalist). Ou sinon autocomplete de jQuery UI.

Franchement ce n'est pas si compliqué

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
 
<!DOCTYPE HTML>
<html>
   <head>
   <title>Untitled</title>
   <meta charset="utf-8">
   <style type="text/css">
#liste{
  position:absolute;
  left:5px;
  top:18px;
  width:133px;
  list-style-type:none;
  cursor:pointer;
}
#element_liste{
  border-top:1px solid #CFCFCF;
}
.element_liste_hover{
  background:#6495ED;
}
.element_liste_out{
  background:#FFFFFF;
}
   </style>
<script>
window.onload = function()
{
  document.getElementById("liste").style.display = "none";
 
  var li00 = document.getElementById("liste").getElementsByTagName("li");
  var li01 = document.getElementById("liste").getElementsByTagName("li");
  var count = li00.length;
 
  //SOURIE
  document.getElementById("ville").onfocus = function()
  {
    document.getElementById("liste").style.display = "block";
  }
  var i = 0;
  while(i < count)
  {
    li00[i].onmousedown = function()
    {
      document.getElementById("ville").value = this.innerHTML;
      document.getElementById("ville").focus();
      document.getElementById("liste").style.display = "none";
    }
    li00[i].onmouseover = function()
    {
      this.className = "element_liste_hover";
 
      var y = 0;
      while(y < count)
      {
        if(li01[y].tabIndex != this.tabIndex)
        {
          li01[y].className = "element_liste_out";
        }
        y = y + 1;
      }
    }
    li00[i].onmouseout = function()
    {
      this.className = "element_liste_out";
    }
    i = i + 1;
  }
  //CLAVIER
  var controle = false;
  var tab_index = -1;
  document.getElementById("ville").onkeypress= function(event)
  {
    if(event.keyCode == 40)
    {
      if(tab_index == count-1)
      {
        tab_index = -1;
      }
      tab_index = tab_index + 1;
      li00[tab_index].className = "element_liste_hover";
 
      var y = 0;
      while(y < count)
      {
        if(li01[y].tabIndex != li00[tab_index].tabIndex)
        {
          li01[y].className = "element_liste_out";
        }
        y = y + 1;
      }
      document.getElementById("ville").value = li00[tab_index].innerHTML;
    }
    if(event.keyCode == 38)
    {
      if(tab_index == -1)
      {
        tab_index = count;
      }
      if(tab_index == 0)
      {
        tab_index = count;
      }
      tab_index = tab_index - 1;
      li00[tab_index].className = "element_liste_hover";
 
      var y = 0;
      while(y < count)
      {
        if(li01[y].tabIndex != li00[tab_index].tabIndex)
        {
          li01[y].className = "element_liste_out";
        }
        y = y + 1;
      }
      document.getElementById("ville").value = li00[tab_index].innerHTML;
    }
  }
}
</script>
   </head>
<body>
<form id="formulaire" action="#" method="get">
   Ville
   <input id="ville" type="text" name="ville" value="" autocomplete="off"/>
   <input name="boutton" type="submit" value="Envoyer">
   </form>
     <ul  id="liste" tabindex="1">
     <li tabindex="0" id="element_liste">Paris</li>
     <li tabindex="1" id="element_liste">Marseillan</li>
     <li tabindex="2" id="element_liste">Agde</li>
     <li tabindex="3" id="element_liste">Cap d'Agde</li>
     <li tabindex="4" id="element_liste">Beziers</li>
   </ul>
</body>
</html>

Merci à toi pour m'avoir indiquer quelques pistes ! :ccool:

13/04/2013, 19h22
NoSmoking

Bonjour,
j'ai comme l'impression qu'un simple SELECT aurait été suffisant, mais je me trompe surement :?