recherche dans une listbox

**micknic** · 23/02/2005, 11h53

Bonjour,

Je dois mettre dans mon site une liste. C'est une liste assez longue car elle contient tout les éléments d'un stock. Je pense donc utiliser une listbox.
Imaginons que les éléments sont triés par ordre alphabétique. Quand l'utilisateur arrive sur la list le premier élément est a.... Imaginons qu'il lui faut un élément commencant par f. Est ce possible que l'utilisateur tape f sur son clavier et que la liste descend automatiquement jusque f??? Faut il coder quelque chose de spécial pour que cela fonctionne??

Merci

**Johnbob** · 23/02/2005, 11h58

Bonjour.

Dans le cas d'un select, si l'utilisateur tape une lettre sur son clavier, la liste se positionne automatiquement

**.:morgoth:.** · 23/02/2005, 12h05

100% d'accord avec Gaara.
Le chose se complique si tu veux pouvoir saisir plus d'une lettre.
Exemple, aller directement sur la 1ere occurence commencant par 'fr'...

**micknic** · 23/02/2005, 12h50

Ok merci beaucoup

Micka

**javatwister** · 23/02/2005, 21h39

au cas où

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>...</title>
 
</head>
<body>
 
 
<form id="form1" action="">
 
<div>
 
<select name="sel" size="5" id="sel">
<option id="o21">Analphabète</option>
<option id="o10">Baguette</option>
<option id="o40">Balance</option>
<option id="o56">Banane</option>
<option id="o58">Banc</option>
<option id="o38">Chat</option>
<option id="o68">Cigarillo</option>
<option id="o24">Circonstance</option>
<option id="o22">Constipation</option>
<option id="o66">Correction</option>
<option id="o39">Couillon</option>
<option id="o34">Cuisse</option>
<option id="o18">Cul</option>
<option id="o3">Déjeuner</option>
<option id="o23">Désordre</option>
<option id="o19">Difficulté</option>
<option id="o71">Dindon</option>
<option id="o35">Dingue</option>
<option id="o50">Doudou</option>
<option id="o49">Esthète</option>
<option id="o67">Faiblesse</option>
<option id="o51">Fauve</option>
<option id="o43">Gargarisme</option>
<option id="o32">Gargouillis</option>
<option id="o60">Génie</option>
<option id="o70">Géranium</option>
<option id="o31">Glouglou</option>
<option id="o46">Hallebarde</option>
<option id="o42">Hurluberlu</option>
<option id="o61">Ibis</option>
<option id="o41">Infinitif</option>
<option id="o33">Jambe</option>
<option id="o36">Javascript</option>
<option id="o30">Jeu</option>
<option id="o53">Justicier</option>
<option id="o62">lynx</option>
<option id="o52">Noeud</option>
<option id="o20">Nom</option>
<option id="o65">Octobre</option>
<option id="o48">Oignon</option>
<option id="o29">Pendu</option>
<option id="o1">Printemps</option>
<option id="o54">Rat</option>
<option id="o55">Régime</option>
<option id="o17">Schtroumpf</option>
<option id="o47">Scotch</option>
<option id="o59">Scratch</option>
<option id="o37">Stupeur</option>
<option id="o28">Stupidité</option>
<option id="o2">Tomate</option>
<option id="o69">Tremblement</option>
<option id="o44">Twist</option>
<option id="o57">Vin</option>
<option id="o45">Western</option>
<option id="o9">Yéti</option>
<option id="o63">Zazou</option>
<option id="o26">Zèbre</option>
<option id="o25">Zigzag</option>
<option id="o64">Zinc</option>
<option id="o27">Zoulou</option>
</select>
 
<p>
<label for="texte">Saisir les premières lettres d'un mot recherché</label><br />
<input type="text" id="texte" name="texte" onkeyup="trouve(this.value)" />
</p>
 
</div>
 
</form>
 
<script type="text/javascript">
 
var tab=new Array();
var s=document.getElementById('sel').options;
 
for(i=0;i!=s.length;i++){
tab[i]=s[i].text.replace(/[àâä]/gi,'a'); 
tab[i]=tab[i].replace(/[àâä]/gi,'a'); 
tab[i]=tab[i].replace(/[éèêë]/gi,'e'); 
tab[i]=tab[i].replace(/[ïî]/gi,'i'); 
tab[i]=tab[i].replace(/[ôö]/gi,'o'); 
tab[i]=tab[i].replace(/[ùüû]/gi,'u'); 
};
 
function trouve(n){
n=n.replace(/[àâä]/gi,'a'); 
n=n.replace(/[éèêë]/gi,'e'); 
n=n.replace(/[ïî]/gi,'i'); 
n=n.replace(/[ôö]/gi,'o'); 
n=n.replace(/[ùüû]/gi,'u'); 
 
for(i=0;i!=s.length;i++){
if(s[i].text.toLowerCase().indexOf(n.toLowerCase())==0){
s.selectedIndex=i;
s.onclick=function(){document.getElementById('texte').value=s[i].text};
break;
};
}
 
}
 
</script>
 
</body>
</html>

recherche dans une listbox

HTML

Discussions similaires

Partager

Partager