[Formulaire] Liste déroulante dynamique [Fait]

**High Voltage** · 10/06/2008, 10h01

Bonjour,

Je dispose d'une liste déroulante avec beaucoup d'options à l'intérieur. Je voudrais donc ajouter une zone de texte où l'utilisateur taperait l'option qui lui conviendrait, et si elle existe alors la liste déroulante n'afficherait que les options que l'utilisateur a tapé.

Suis-je clair ? Si oui quelqu'un sait faire ça ?

Merci d'avance !

**tusssss** · 10/06/2008, 10h05

Il va te falloir utiliser AJAX à priori...

Un tutoriel ici http://dcabasson.developpez.com/arti...ion-pas-a-pas/

**SpaceFrog** · 10/06/2008, 10h05

heu il y a plusieurs options identiques ?
ou tu veux que uniquement les options "commençant par ..." ce que l'utilisatuer à tapé s'affichent ?

**High Voltage** · 10/06/2008, 10h08

Plusieurs options identiques séparées par des tirets.

Par exemple :
Frite-merguez-saucisse
Taboulé-tomate-merguez
Hérisson-bolognaise-frite

Quand l'utilisateur tape "frite" par exemple, dans la liste déroulante il ne doit n'y avoir plus que la 1ère et la 3ème option.

**SpaceFrog** · 10/06/2008, 10h56

vite fait dasn l'idée ça pourrait faire un truc comme ça ?

Code :

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

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
<script type="text/javascript">
var Formules= new Array();
 
Formules[0]="Abricot-Banane-Coulis"
Formules[0].value=1
Formules[1]="Abricot-Charlotte-Domino"
Formules[1].value=2
Formules[2]="Amande-Banane-fraise"
Formules[2].value=3
Formules[3]="Frites-Merguez-mayonnaise"
Formules[3].value=4
Formules[4]="Barbac-Cerise-boisson"
Formules[4].value=5
Formules[5]="Poulet-Bonbon-frite"
Formules[5].value=6
Formules[6]="Steack-Haricots-ketchup"
Formules[6].value=7
Formules[7]="Saucisse-Salade-Tomate"
Formules[7].value=8
Formules[8]="Merguez-salade-Tomate"
Formules[8].value=9
 
function choice(Obj){
var Sel=document.getElementById('Menus');
Sel.options.length=0;
var i=0;
 
while(Formules[i]){
 
		if(Obj.value.length>3 && (Formules[i].toLowerCase().indexOf(Obj.value.toLowerCase())>-1)){
 
		         var newOpt=document.createElement('option');
		         newOpt.innerHTML=Formules[i];
		         newOpt. value=Formules[i].value;
		         Sel.appendChild(newOpt);
		         }
		         i++;
		         }
 
}
 
</script>
 
 
 
</head>
 
<body>
<input type='text' onkeyup="choice(this)" value='' />
<select id="Menus" style="width:250px;">
</select>
</body>
 
</html>

**High Voltage** · 10/06/2008, 13h05

Oui c'est tout à fait ça le principe sauf que ma liste contient environ 200 options, je ne vais donc pas les numéroter une par une ! Il y aurait un autre moyen ?

Merci beaucoup en tout cas !

**SpaceFrog** · 10/06/2008, 13h06

comment ça les numéroter une par une ?
de toute façn tu te pastille le code htm non ou alors les options proviennent d'une base ?

[Formulaire] Liste déroulante dynamique [Fait]

JavaScript

Vue hybride

Discussions similaires

Partager

Partager