Selection clavier sur liste déroulante
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:
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.
