[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 ?

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

Les options proviennent d'un annuaire LDAP, et peuvent changer de temps en temps. Je ne peux donc pas les prendre une par une afin de les "étiqueter" !

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

comment construits tu ton select à ce jour ???
je ne vois aucune contre indication ...
qu'entends par "étiqueter" ???

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

Voici comment est construit mon select (attention page en PERL)

$N0="chemins.txt";
open (F0,$N0);
while (<F0>)
{
chop;
if (/[0-9]:/)
{
@var=split(/:/,$_);
if ($var[0]==8) { $biblio=$var[1]; } ## fichiers include
}
}
close(F0);
require($biblio);
&centreldap;
print("<u>Service</u> :");
print("<select name=\"choix_service\">");
print("<option value=\"(choisissez)\" selected=\"selected\">(choisissez)</option>");
&services;
print("</select>");

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

ben fait ça mais pour générer l'array javascript ....
pas de contrindication ...

**High Voltage** · 10/06/2008, 14h20

Désolé mais c'est la première fois que je dois faire du Javascript donc j'ai un peu du mal !

Comment puis-je remplacer les "Formules[1]="Abricot-Charlotte-Domino"
Formules[1].value=2" dans mon cas ?

Merci beaucoup !

**SpaceFrog** · 10/06/2008, 14h26

HEu ben je ne vois même pas comment tes 200 options ???
pour moi là il n'y en a qu'une

Code :

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

&services;

ça vient d'ou ça ?

**High Voltage** · 10/06/2008, 14h31

C'est justement la liste de toutes les options. Dans le formulaire on a toutes les options une par une grâce à cette variable.

**SpaceFrog** · 10/06/2008, 14h34

et tu peux pas faire la mêmé chose pour l'array ?
sinon va falloir construire l'array à partir des options...

**High Voltage** · 13/06/2008, 14h35

En fait il n'y a pas un moyen de récupérer tout simplement les options de la liste déroulante afin de réaliser le truc de recherche ?

**SpaceFrog** · 13/06/2008, 14h36

oui c'et ce que je disais dans ma reponse précédente, sur le onload de la page construire l'array à partir des options du select ...

**High Voltage** · 13/06/2008, 14h47

Je me répète mais je n'ai jamais fait de Javascript ! En voyant le sctipt que tu m'as donné c'est comme du Chinois !

Comment puis-je donc faire pour récupérer pour construire l'Array ?

Merci beaucoup car c'est vraiment important pour moi !!

**SpaceFrog** · 13/06/2008, 15h23

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
<html>
<head>
 
<script type="text/javascript">
 var Formules= new Array();
 
function MakeArray(){
 var Sel=document.getElementById('Menus');
 
 for (i=0;Sel.options[i];i++){
           Formules[i]=Sel.options[i].innerHTML;
           Formules[i].value=Sel.options[i].value;
           }
 document.getElementById('Menus').options.length=0;
  }
 
 
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 onload="MakeArray()">
<input type='text' onkeyup="choice(this)" value='' />
<select id="Menus" style="width:250px;">
<option value='1'>Abricot-Banane-Coulis</option>
<option value='2'>Fraise-Frites-Chocolat</option>
<option value='3'>Pomme-Banane-Cassis</option>
<option value='4'>Cassis-Banane-Coulis</option>
<option value='5'>Orange-Coulis</option>
<option value='6'>Citron-Banane-Coulis</option>
 
</select>
</body>

J'envoie la facture à qui ?

**High Voltage** · 13/06/2008, 15h44

Hihi t'es un Dieu !

Merci beaucoup tu m'as bien aidé !

Aurevoir

[Formulaire] Liste déroulante dynamique [Fait]

JavaScript

Discussions similaires

Partager

Partager