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