Selection clavier sur liste d�roulante

**Maxime_** · 10/01/2006, 10h57

Bonjour,

Je cherche � mettre en place un petit script permettant de selectionner un element dans une liste d�roulante (select simple) suivant la chaine tap� au clavier par l'utilisateur. Voici mon code :

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
 
<html>
<head>
<title>Liste déroulante éditable</title>
<script language="JavaScript" type="text/javascript">
//Variable globale contenant les chaines frappees (par listbox)             
var tb_chaines_rechfrappe = new Array();
 
// Gestion de la frappe clavier (fonction à mettre sur l'evt onkeyup de la listebox) :
//  - select : objet select
//  - e : objet event
function capte_rechfrappe(select,e) {
	var code = 0;
	var car = '';
 
         //Récuperation du code de la touche frappee
	if(parseInt(navigator.appVersion) >=4){
		if(navigator.appName == 'Netscape'){ // Pour Netscape, firefox, ...
			code = e.which;
		} else { // pour Internet Explorer
			code = e.keyCode;
		}
	}
 
         //Si la touche est une lettre ou un nombre on incremente la chaine globale et on lance la selection sur la listebox
	if((code>=65 && code<=90) || (code>=48 && code<=57)){
		car = String.fromCharCode(code);
 
		if ((typeof tb_chaines_rechfrappe[select.name])=='undefined')
			tb_chaines_rechfrappe[select.name] = car;
		else
			tb_chaines_rechfrappe[select.name] += car;
 
		document.getElementsByName('texte')[0].value=tb_chaines_rechfrappe[select.name];
		document.getElementsByName('code')[0].value=code;	
		placeListe_rechfrappe(select);
	}
}
 
//Placement sur la liste :
//  - select : objet select
function placeListe_rechfrappe(select) {
 
	var str_chaine = new String(tb_chaines_rechfrappe[select.name]);
	var elem_select = false;
 
         //On parcourt toute la liste d'options
	for(i=0;i<select.options.length;i++) {
		var option_text = select.options[i].text;
		var str_option_text = new String(option_text);
 
		str_option_text = str_option_text.toUpperCase();
 
                  //Si le debut de la chaine 'text' de l'option correspond a la chaine saisie on selection l'option
		if((str_option_text.substr(0,str_chaine.length) == str_chaine) && !elem_select) {
			select.options[i].selected=true;
			elem_select = true;
		}
	}
}
 
//Reinitialisation de la chaine de frappe (fonction à mettre sur l'evt onBlur de la listebox) :
//  - select : objet select
function reinit_rechfrappe(select) {
	tb_chaines_rechfrappe[select.name] = '';
}
 
</script>
 
</head>
 
<body bgcolor="#FFFFFF" text="#000000">
<form name="form">
 
<select name='selectbox[truc]' onkeyup='javascript:capte_rechfrappe(this,event);' onBlur='javascript:reinit_rechfrappe(this);'>
	<option>maison</option>
	<option>miel</option>
 	<option>mariage</option>
	<option>chien</option>
	<option>chemin</option>
	<option>chat</option>
 	<option>etoile</option>
</select>
 
<input type=text name='code'>
 
<input type=text name='texte'>
 
</form>
</body>
</html>

Ca fonctionne assez bien sauf que je me heurte a un probl�me li� � la fonction de selection auto de IE qui s'arr�te � 1 seul caract�re. En fait, cela se passe lorsque la liste est d�roul�e, si on tape une suite de caract�re le bon �l�ment est s�lection mais si on tabule (perte du focus sur la liste), c'est l'�lement correspondant � la derni�re lettre tap� au clavier qui est selectionn�e ...

Quelqu'un aurait une id�e pour contourner ce probl�me ?

Merci d'avance.

**siddh** · 10/01/2006, 11h06

salut,
j'ai test� ton script et �a � l'air de fonctionner sur ma machine.
Pourrais tu donner un exemple du comportement qui te g�ne ?

Si je tapes "ch" et fais tab il garde bien "chien"

**Maxime_** · 10/01/2006, 11h15

Merci pour ta r�ponse rapide.
En fait, cela d�conne lorsque je d�roule la liste, je tape 'che', j'ais bien 'chemin' qui est selectionn�, mais qd je tabule, c'est 'etoile' qui devient selectionn�. Et cela ne se produit pas lorsque l'on ne d�roule pas la liste avant de taper au clavier.

**Maxime_** · 10/01/2006, 11h28

Sous quelle navigateur as-tu test� ce code ? Moi je d�veloppe avec la derni�re version de IE mais Opera g�re par d�faut ce principe, je ne sais pas si d'autres le font aussi.

**siddh** · 10/01/2006, 11h34

ca marche ie6 sp2 et ffx 1.5 liste d�roul�e ou pas

**Maxime_** · 10/01/2006, 12h01

... alors l� je ne comprends rien. J'ai la m�me version de IE que toi et �a d�conne.

J'ai aussi test� sur mon serveur SBS2003 avec IE 6.0.379 (plus r�cent que le SP2 pour winXP apparemment) et �a d�conne aussi.

**siddh** · 10/01/2006, 12h16

ben j'ai fait un copier coller de ton code

**Maxime_** · 10/01/2006, 12h27

oui oui, je ne remet pas en cause ton test, au contraire.
C'est chez moi que �a doit d�conner mais l� je s�che compl�tement. Ca fait 2 jours que je m'arrache les cheveux sur ce bug, mais qui en est peut'�tre pas un si �a vient de ma machine.
Bref je vais tester sur les machines des coll�gues pour confirmer �a. Je te tiendrais au courant.
Merci pour ton aide.

**Maxime_** · 11/01/2006, 09h30

J'ai retest� sur d'autre machine winXP avec la m�me version de IE et �a ne fonctionne pas bien nonplus.
Est-ce qu'il y aurait d'autre personnes pour qui �a fonctionne correctement ?
Est-ce que cela pourrait venir d'un param�trage sp�cifique de windows ou du navigateur ?

**shwin** · 11/01/2006, 14h16

J'ai le meme probleme sous win2k

j'ai aussi rajouter avion dans la liste, comme ca ca se produit aussi avec le mot chat

C => selection de chien
H => selection de chien
A=> selection de avion ensuite changement rapide pour selection de chat
T => selection de chat

� la place de tout ca, moi je me pencherais sur un google suggest, meme si ta liste d�roulante n'est pas dynamique ... tu peux simuler un drop down avec un input + div

**Maxime_** · 12/01/2006, 10h35

Ok merci de ton aide, j'avais esp�r� ne pas avoir a simuler ma listbox de cette fa�on, mais bon s'il n'y a pas d'autres choix ...

Selection clavier sur liste d�roulante

JavaScript

Discussions similaires

Partager

Partager