récupérer les caractères numériques

Version imprimable

salut :)
chose étrange , j'essaye de récupérer les caractères tapé au clavier au moment ou l'on tape dans une liste déroulante, tout va bien sauf pour les caractères tapé au pavé numérique qui me renvois abcde...

démo :
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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Démo calendrier v2</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> function checkWord(e){ if (!e) { e = window.event; caract = String.fromCharCode(e.which); } else{ caract = String.fromCharCode(e.keyCode); } document.getElementById('caractere').value += caract.toLowerCase(); } function deleteFieldValue(){ document.getElementById('caractere').value = ""; setInterval(function(){deleteFieldValue()},5000); } </script> </head> <body> <input type="text" id="caractere" value ="" readonly="readonly"> <select onkeyup="checkWord(event)"> <option>123</option> <option>113</option> <option>223</option> <option>323</option> <option>2223</option> <option>1233</option> <option>12213</option><option>123</option> <option>122233</option> <option>333123</option> </select> <script type="text/javascript">deleteFieldValue();</script> </body> </html>
pour tester : cliqué sur la liste déroulante pui appuiyer sur des lettres ou chiffres ... si le schiffres sont tapé au clavier numérique => abcde... renvoyé si tapé avec shift+ les nombres j'ai le bon retour :-/

le but final est de faire une recherche dans la liste et de sélectionner en fonction de ce que l'utilisateur aura recherché ...

49 vs 97

tiens j'ai un bout de code qui va t'aider à eclaircir ton mystère ;)

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
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
 
<html>
<head>
<title>Keyboard Events and Codes</title>
<style type="text/css">
body         { font-family: Arial, sans-serif }
h1           { text-align: right }
td           { text-align: center }
</style>
 
 
<script language="JavaScript" type="text/javascript">
// array of table cell ids
var tCells = ["downKey", "pressKey", "upKey", "downChar", "pressChar", "upChar", "keyTarget", "character"];
// clear table cells for each key down event 
function clearCells() {
	for (var i = 0; i < tCells.length; i++) {
			document.getElementById(tCells[i]).innerHTML = "&mdash;"; 
			} 
} 
 
// display target node's node name
function showTarget(evt) { 
	var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
	if (node) { 
				document.getElementById("keyTarget").innerHTML = node.nodeName; 
				}
		 }
 
// decipher key down codes 
function showDown(evt) {
		clearCells(); 
		evt = (evt) ? evt : ((event) ? event : null); 
		if (evt) { document.getElementById("downKey").innerHTML = evt.keyCode; 
					if (evt.charCode) { 
											document.getElementById("downChar").innerHTML = evt.charCode; 
											} 
					showTarget(evt); }
		}
 
 // decipher key press codes 
 function showPress(evt) {
 		 evt = (evt) ? evt : ((event) ? event : null);
 		 if (evt) {
 		 			 document.getElementById("pressKey").innerHTML = evt.keyCode;
 		 			 if (evt.charCode) {
 		 			 						document.getElementById("pressChar").innerHTML = evt.charCode;
 		 			 						} 
 		 			 showTarget(evt);
 		 			 var charCode = (evt.charCode) ? evt.charCode : evt.keyCode; 
 		 			 // use String method to convert back to character 
 		 			 document.getElementById("character").innerHTML = String.fromCharCode(charCode); 
 		 			 }
 		 	}
 
// decipher key up codes 
function showUp(evt) {
					evt = (evt) ? evt : ((event) ? event : null);
					if (evt) { document.getElementById("upKey").innerHTML = evt.keyCode;
								if (evt.charCode) { 
													  document.getElementById("upChar").innerHTML = evt.charCode; 
													  } 
								showTarget(evt); 
								}
					 }
 
// set page-wide event listeners
 document.onkeydown = showDown; 
 document.onkeypress = showPress; 
 document.onkeyup = showUp; 
 </script> 
 
 
 
</head>
 
<body>
<h1>Key and Character Codes vs. Event Types</h1>
<hr>
<p>Enter some text with uppercase and lowercase letters:<br>
</p>
<form>
	<input type="text" id="entry" size="60" onkeydown="showDown(event)"	onkeypress="showPress(event)" onkeyup="showUp(event)">
</form>
<table border="2" cellpadding="5" cellspacing="5">
	<caption>Keyboard Event Properties</caption>
	<tr>
		<th>Data</th>
		<th>keydown</th>
		<th>keypress</th>
		<th>keyup</th>
	</tr>
	<tr>
		<td>keyCode</td>
		<td id="downKey">—</td>
		<td id="pressKey">—</td>
		<td id="upKey">—</td>
	</tr>
	<tr>
		<td>charCode</td>
		<td id="downChar">—</td>
		<td id="pressChar">—</td>
		<td id="upChar">—</td>
	</tr>
	<tr>
		<td>Target</td>
		<td id="keyTarget" colspan="3">—</td>
	</tr>
	<tr>
		<td>Character</td>
		<td id="character" colspan="3">—</td>
	</tr>
 
 
</table>
 
</body>
</html>

yes mais le problème persiste s'il s'agit d'une liste déroulante ==>

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Démo calendrier v2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
 function showPress(evt) {
 		 evt = (evt) ? evt : ((event) ? event : null);
 		 if (evt) {
 
 		 			 var charCode = (evt.charCode) ? evt.charCode : evt.keyCode; 
 		 			 // use String method to convert back to character 
 		 			 document.getElementById("caractere").value = String.fromCharCode(charCode); 
 		 			 }
 		 	}
</script>
</head>
<body>	
	<input type="text" id="caractere" value ="" onkeyup="checkWord(event)">
	<select onkeypress="showPress(event)">
	<option>123</option>
	<option>113</option>
	<option>223</option>
	<option>323</option>
	<option>2223</option>
	<option>1233</option>
	<option>12213</option><option>123</option>
	<option>122233</option>
	<option>333123</option>
 
	</select>
	<script type="text/javascript"></script>
</body>
</html>

je tape un caractère dans l'input => ok
sur la liste => Ko

EDIT ==> RESOLU CODE MIS A JOUR

FF ne raffraichissait plus ma page :aie:

hé non :-/
le keyup et le onkeypress ne renvoit pas le même char code :D

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Démo calendrier v2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
 function showPress(evt) {
 		 evt = (evt) ? evt : ((event) ? event : null);
 		 if (evt) {
 
 		 			 var charCode = (evt.charCode) ? evt.charCode : evt.keyCode; 
 		 			 // use String method to convert back to character 
 		 			 document.getElementById("caractere").value += String.fromCharCode(charCode); 
 		 			 }
					 ok = false;
					 selectChoice();
					 return false;
 }
 
var tempo = null;
var ok = false; 
function resetField(){
		if(!ok){
			document.getElementById("caractere").value = '';
			tempo = setTimeout(function(){resetField()},3000);
		}
}
 
function selectChoice(){
	var listeValue = document.getElementById('testChoice').options;
		for(var i = 0 , l = listeValue.length ; i < l ; i++){
			if(document.getElementById("caractere").value == listeValue[i].text){
				alert(document.getElementById("caractere").value +"=="+ listeValue[i].text);
				document.getElementById('testChoice').selectedIndex = i;
				ok = true;
				alert("trouve : " + i);
 				break;
			}
 
		}
}
 
</script>
</head>
<body>	
	<input type="text" id="caractere" value ="">
	<select onkeypress="showPress(event);return false;" size="5" id="testChoice" >
	<option>123</option>
	<option>113</option>
	<option>223</option>
	<option>323</option>
	<option>2223</option>
	<option>1233</option>
	<option>12213</option><option>123</option>
	<option>122233</option>
	<option>333123</option>
 
	</select>
	<script type="text/javascript">resetField()</script>
</body>
</html>

spaffy : test en remplacant onkeypress par onkeyup ...
l'évènement de sélection du select reprend le pas sur ma méthode avec le keypress :(

14/11/2008, 15h36
SpaceFrog

tu as testé le code que je t'ai filé ?
c'est exactement ce que cela démontre ...
14/11/2008, 15h54
le_chomeur

oui testé :)
je pensais que l'erreur venais de moi ...

merdoum ...

on avait pas traité un sujet dans le même style il n'y a pas longtemps ??
sur une selection dans une listebox lorsque l'on tape un caractère !?
14/11/2008, 15h58
SpaceFrog

listbox taper un caractère ?
heu tu veux dire emulation de combo ?
avec un input text
14/11/2008, 16h24
le_chomeur

non non :)

tu click sur une listbox ( un select quoi ^^ )
et tape des caractère , la liste se positionne sur l'élément de la liste qui corespond mais uniquement en fonction du premier caractère tapé ...
la il faudrait pouvoir taper une suite ( voir un mot ) et que la liste se positionne dessus

oui donc le principe d'auto complétion
faut chopper les caractères tapés et les coller dans un buffer et positionner ensuite manu military le selectedindex ...
j'ai retrouvé un vieux bout de code ... (JT ?)

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
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
<head>
<script type="text/javascript">
function position()
{ for (var n=0;n<pays.length;n++)
      { if (pays[n].text.toLowerCase()>=rech.value.toLowerCase())
           { pays.selectedIndex=n;
              n=pays.length;  }  }  }
 
function sel(){
pays.selectedIndex=13;
alert(pays.itemNumber)
}             
</script>
</head>
<body>
<div z-index="3" style="position:absolute">
<select name=pays onmouseover="this.size=10" onmouseout="this.size=0">
   <option value="Afghanistan">Afghanistan</option>
        <option value="Afrique du Sud">Afrique du Sud</option>
        <option value="Albanie">Albanie</option>
        <option value="Algerie">Algerie</option>
        <option value="Allemagne">Allemagne</option>
        <option value="Andorre">Andorre</option>
        <option value="Angola">Angola</option>
        <option value="Anguilla">Anguilla</option>
        <option value="Antarctique">Antarctique</option>
        <option value="Antigua et Barbuda">Antigua et Barbuda</option>
        <option value="Antilles neerlandaises">Antilles neerlandaises</option>
        <option value="Arabie Saoudite">Arabie Saoudite</option>
        <option value="Argentine">Argentine</option>
        <option value="Armenie">Armenie</option>
        <option value="Aruba">Aruba</option>
        <option value="Australie">Australie</option>
        <option value="Autriche">Autriche</option>
        <option value="Azerbaïdjan">Azerbaïdjan</option>
        <option value="Benin">Benin</option>
        <option value="Bahamas">Bahamas</option>
        <option value="Bahrein">Bahrein</option>
        <option value="Bangladesh">Bangladesh</option>
        <option value="Barbade">Barbade</option>
        <option value="Belarus">Belarus</option>
        <option value="Belgique">Belgique</option>
        <option value="Belize">Belize</option>
        <option value="Bermudes">Bermudes</option>
        <option value="Bhoutan">Bhoutan</option>
        <option value="Bolivie">Bolivie</option>
        <option value="Bosnie et Herzegovina">Bosnie et Herzegovina</option>
        <option value="Botswana">Botswana</option>
        <option value="Bresil">Bresil</option>
        <option value="Brunei Darussalam">Brunei Darussalam</option>
        <option value="Bulgarie">Bulgarie</option>
        <option value="Burkina Faso">Burkina Faso</option>
        <option value="Burundi">Burundi</option>
        <option value="Cambodge">Cambodge</option>
        <option value="Cameroun">Cameroun</option>
        <option value="Canada">Canada</option>
        <option value="Cap-Vert">Cap-Vert</option>
        <option value="Chili">Chili</option>
        <option value="Chine">Chine</option>
        <option value="Chypre">Chypre</option>
        <option value="Cocos (Iles de Keeling)">Cocos (Iles de Keeling)</option>
        <option value="Colombie">Colombie</option>
        <option value="Comores">Comores</option>
        <option value="Congo">Congo</option>
        <option value="Cook Islands">Cook Islands</option>
        <option value="Coree (Nord)">Coree (Nord)</option>
        <option value="Coree (Sud)">Coree (Sud)</option>
        <option value="Costa Rica">Costa Rica</option>
        <option value="Cote D'Ivoire">Cote D'Ivoire</option>
        <option value="Croatia (Hrvatska">Croatia (Hrvatska</option>
        <option value="Cuba">Cuba</option>
        <option value="Danemark">Danemark</option>
        <option value="Djibouti">Djibouti</option>
        <option value="Dominica">Dominica</option>
        <option value="Egypte">Egypte</option>
        <option value="Emirats Arabes unis">Emirats Arabes unis</option>
        <option value="Equateur">Equateur</option>
        <option value="Erythree">Erythree</option>
        <option value="Espagne">Espagne</option>
        <option value="Estonie">Estonie</option>
        <option value="Etat de la Cite du Vatican (Saint-siège)">Etat de la Cite du Vatican (Saint-siège)</option>
        <option value="Etats-unis USA">Etats-unis USA</option>
        <option value="Ethiopie">Ethiopie</option>
        <option value="Fidji">Fidji</option>
        <option value="Finlande">Finlande</option>
        <option value="France" selected>France</option>
        <option value="Georgie">Georgie</option>
        <option value="Gabon">Gabon</option>
        <option value="Gambie">Gambie</option>
        <option value="Ghana">Ghana</option>
        <option value="Gibraltar">Gibraltar</option>
        <option value="Grèce">Grèce</option>
        <option value="Grenade">Grenade</option>
        <option value="Groenland">Groenland</option>
        <option value="Guam">Guam</option>
        <option value="Guatemala">Guatemala</option>
        <option value="Guinee">Guinee</option>
        <option value="Guinee equatoriale">Guinee equatoriale</option>
        <option value="Guinee-Bissau">Guinee-Bissau</option>
        <option value="Guyane">Guyane</option>
        <option value="Haïti">Haïti</option>
        <option value="Honduras">Honduras</option>
        <option value="Hong kong">Hong kong</option>
        <option value="Hongrie">Hongrie</option>
        <option value="Ile Christmas">Ile Christmas</option>
        <option value="Ile de Bouvet">Ile de Bouvet</option>
        <option value="Ile de la Norfolk">Ile de la Norfolk</option>
        <option value="Iles Caïman">Iles Caïman</option>
        <option value="Iles de Faroe">Iles de Faroe</option>
        <option value="Iles de Salomon">Iles de Salomon</option>
        <option value="Iles de Svalbard et de janv. Mayen">Iles de Svalbard et de janv. Mayen</option>
        <option value="Iles de Wallis et Futuna">Iles de Wallis et Futuna</option>
        <option value="Iles Falkland (Malvinas)">Iles Falkland (Malvinas)</option>
        <option value="Iles Heard et de McDonald">Iles Heard et de McDonald</option>
        <option value="Iles Marshall">Iles Marshall</option>
        <option value="Iles Maurice">Iles Maurice</option>
        <option value="Iles Turques et Caïques">Iles Turques et Caïques</option>
        <option value="Iles Vierges (Britanniques)">Iles Vierges (Britanniques)</option>
        <option value="Iles Vierges (USA)">Iles Vierges (USA)</option>
        <option value="Inde">Inde</option>
        <option value="Indonesie">Indonesie</option>
        <option value="Irak">Irak</option>
        <option value="Iran">Iran</option>
        <option value="Irlande">Irlande</option>
        <option value="Islande">Islande</option>
        <option value="Israel">Israel</option>
        <option value="Italie">Italie</option>
        <option value="Jamaïque">Jamaïque</option>
        <option value="Japon">Japon</option>
        <option value="Jordanie">Jordanie</option>
        <option value="Kazakhstan">Kazakhstan</option>
        <option value="Kenya">Kenya</option>
        <option value="Kiribati">Kiribati</option>
        <option value="Koweit">Koweit</option>
        <option value="Kyrgyzstan">Kyrgyzstan</option>
        <option value="Laos">Laos</option>
        <option value="Latvia">Latvia</option>
        <option value="Lesotho">Lesotho</option>
        <option value="Liberia">Liberia</option>
        <option value="Liban">Liban</option>
        <option value="Libye">Libye</option>
        <option value="Liechtenstein">Liechtenstein</option>
        <option value="Lithuanie">Lithuanie</option>
        <option value="Luxembourg">Luxembourg</option>
        <option value="Macau">Macau</option>
        <option value="Macedonia">Macedonia</option>
        <option value="Madagascar">Madagascar</option>
        <option value="Malaisie">Malaisie</option>
        <option value="Malawi">Malawi</option>
        <option value="Maldives">Maldives</option>
        <option value="Mali">Mali</option>
        <option value="Malte">Malte</option>
        <option value="Mariannes du Nord">Mariannes du Nord</option>
        <option value="Maroc">Maroc</option>
        <option value="Martinique">Martinique</option>
        <option value="Mauritanie">Mauritanie</option>
        <option value="Mayotte">Mayotte</option>
        <option value="Mexique">Mexique</option>
        <option value="Micronesie">Micronesie</option>
        <option value="Moldova">Moldova</option>
        <option value="Monaco">Monaco</option>
        <option value="Mongolie">Mongolie</option>
        <option value="Montserrat">Montserrat</option>
        <option value="Mozambique">Mozambique</option>
        <option value="Myanmar">Myanmar</option>
        <option value="Nepal">Nepal</option>
        <option value="Namibie">Namibie</option>
        <option value="Nauru">Nauru</option>
        <option value="Nicaragua">Nicaragua</option>
        <option value="Nigeria">Nigeria</option>
        <option value="Niger">Niger</option>
        <option value="Niue">Niue</option>
        <option value="Norvège">Norvège</option>
        <option value="Nouvelle caledonie">Nouvelle caledonie</option>
        <option value="Nouvelle-Zelande">Nouvelle-Zelande</option>
        <option value="Oman">Oman</option>
        <option value="Ouganda">Ouganda</option>
        <option value="peripheriques mineures des Etats-unis USA">peripheriques mineures des Etats-unis USA</option>
        <option value="Perou">Perou</option>
        <option value="Pakistan">Pakistan</option>
        <option value="Palau">Palau</option>
        <option value="Panama">Panama</option>
        <option value="Papouasie-Nouvelle-Guinee">Papouasie-Nouvelle-Guinee</option>
        <option value="Paraguay">Paraguay</option>
        <option value="Pays-Bas">Pays-Bas</option>
        <option value="Philippines">Philippines</option>
        <option value="Pitcairn">Pitcairn</option>
        <option value="Pologne">Pologne</option>
        <option value="Polynesie Française">Polynesie Française</option>
        <option value="Porto Rico">Porto Rico</option>
        <option value="Portugal">Portugal</option>
        <option value="Qatar">Qatar</option>
        <option value="Republique centrafricaine">Republique centrafricaine</option>
        <option value="Republique Dominicaine">Republique Dominicaine</option>
        <option value="Republique slovaque">Republique slovaque</option>
        <option value="Republique tchèque">Republique tchèque</option>
        <option value="Roumanie">Roumanie</option>
        <option value="Royaume-unis">Royaume-unis</option>
        <option value="Russie">Russie</option>
        <option value="Rwanda">Rwanda</option>
        <option value="Senegal">Senegal</option>
        <option value="S. Georgie et S. Sandwich Isls.">S. Georgie et S. Sandwich Isls.</option>
        <option value="Sahara occidental">Sahara occidental</option>
        <option value="Saint Kitts et Nevis">Saint Kitts et Nevis</option>
        <option value="Saint Lucia">Saint Lucia</option>
        <option value="Saint Pierre et Miquelon">Saint Pierre et Miquelon</option>
        <option value="Saint Vincent et Grenadines">Saint Vincent et Grenadines</option>
        <option value="Saint-Marin">Saint-Marin</option>
        <option value="Salvador">Salvador</option>
        <option value="Samoa">Samoa</option>
        <option value="Samoa americaines">Samoa americaines</option>
        <option value="Sao-Tome-et-Principe">Sao-Tome-et-Principe</option>
        <option value="Seychelles">Seychelles</option>
        <option value="Sierra Leone">Sierra Leone</option>
        <option value="Singapour">Singapour</option>
        <option value="Slovenie">Slovenie</option>
        <option value="Somalie">Somalie</option>
        <option value="Souaziland">Souaziland</option>
        <option value="Soudan">Soudan</option>
        <option value="Sri Lanka">Sri Lanka</option>
        <option value="St Pierre et Miquelon">St Pierre et Miquelon</option>
        <option value="St. Helena">St. Helena</option>
        <option value="Suède">Suède</option>
        <option value="Suisse">Suisse</option>
        <option value="Suriname">Suriname</option>
        <option value="Syrie">Syrie</option>
        <option value="Taiwan">Taiwan</option>
        <option value="Tajikistan">Tajikistan</option>
        <option value="Tanzanie">Tanzanie</option>
        <option value="Tchad">Tchad</option>
        <option value="Territoire britannique de l'Ocean Indien">Territoire britannique de l'Ocean Indien</option>
        <option value="Territoires meridionaux français">Territoires meridionaux français</option>
        <option value="Thaïlande">Thaïlande</option>
        <option value="Timor est">Timor est</option>
        <option value="Togo">Togo</option>
        <option value="Tokelao">Tokelao</option>
        <option value="Tonga">Tonga</option>
        <option value="Trinite-et-Tabago">Trinite-et-Tabago</option>
        <option value="Tunisie">Tunisie</option>
        <option value="Turkmenistan">Turkmenistan</option>
        <option value="Turquie">Turquie</option>
        <option value="Tuvalu">Tuvalu</option>
        <option value="Ukraine">Ukraine</option>
        <option value="Uruguay">Uruguay</option>
        <option value="Uzbekistan">Uzbekistan</option>
        <option value="Vanuatu">Vanuatu</option>
        <option value="Venezuela">Venezuela</option>
        <option value="Viet Nam">Viet Nam</option>
        <option value="Yemen">Yemen</option>
        <option value="Yougoslavie">Yougoslavie</option>
        <option value="Zaïre">Zaïre</option>
        <option value="Zambie">Zambie</option>
        <option value="Zimbabwe">Zimbabwe</option>
</select>
</div>
<br/>
<br/>
Rechercher : <input type="text" name=rech onkeyup="position();"><br/>
<input type="button" value="selectionner" onclick="sel()" />
</body>

suffirait de virer l'input text pourjouer du buffer qaund le select à le focus

14/11/2008, 16h31
le_chomeur

justement la ou le bas blesse => je suis arrivé jusque la :)
sauf qu'il ne s'agit pas tout a fait d'un système d'autocompletion car la sélection doit se faire directement sur la liste et non sur l'input comme tu l'a souligné...

LE HIC :) les caractères numérique du pavé numérique :)

comme je l'ai souligné au dessus , l'évènement de la liste prend le dessus sur le onkeypress , il aurait fallut géré sur le onkeyup mais le keycode n'est pas le bon :(
14/11/2008, 16h36
SpaceFrog

lis bien ...

lorsque le select à le focus ...

tu choppes les caractères et tu les colles dans un buffer ...

pour le choppage des caractères la solution est dans le code donné plus haut il différentie le keyprsess keydown et keyup ...

quasiement résolu :
j'ai ajouté une expression régulière ;)

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
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<head>
<script type="text/javascript">
function position()
{ 
	var MesOptions = document.getElementById('pays').options;
	var valueToTest = document.getElementById('rech').value.toLowerCase();
	var Expression = new RegExp("^"+valueToTest+".*","gi");
 
	for (var n=0;n<MesOptions.length;n++){
		var valueToCompare = MesOptions[n].text.toLowerCase();
		var result = Expression.test(valueToCompare);
			if(result){
				document.getElementById('pays').selectedIndex=n;
			}
		}
}
 
function sel(){
	document.getElementById('pays').selectedIndex=13;
	alert(MesOptions.length)
}             
</script>
</head>
<body>
<div z-index="3" style="position:absolute">
<select name="pays" onmouseover="this.size=10" onmouseout="this.size=0" id="pays">
   <option value="Afghanistan">Afghanistan</option>
        <option value="Afrique du Sud">Afrique du Sud</option>
        <option value="Albanie">Albanie</option>
        <option value="Algerie">Algerie</option>
        <option value="Allemagne">Allemagne</option>
        <option value="Andorre">Andorre</option>
        <option value="Angola">Angola</option>
        <option value="Anguilla">Anguilla</option>
        <option value="Antarctique">Antarctique</option>
        <option value="Antigua et Barbuda">Antigua et Barbuda</option>
        <option value="Antilles neerlandaises">Antilles neerlandaises</option>
        <option value="Arabie Saoudite">Arabie Saoudite</option>
        <option value="Argentine">Argentine</option>
        <option value="Armenie">Armenie</option>
        <option value="Aruba">Aruba</option>
        <option value="Australie">Australie</option>
        <option value="Autriche">Autriche</option>
        <option value="Azerbaïdjan">Azerbaïdjan</option>
        <option value="Benin">Benin</option>
        <option value="Bahamas">Bahamas</option>
        <option value="Bahrein">Bahrein</option>
        <option value="Bangladesh">Bangladesh</option>
        <option value="Barbade">Barbade</option>
        <option value="Belarus">Belarus</option>
        <option value="Belgique">Belgique</option>
        <option value="Belize">Belize</option>
        <option value="Bermudes">Bermudes</option>
        <option value="Bhoutan">Bhoutan</option>
        <option value="Bolivie">Bolivie</option>
        <option value="Bosnie et Herzegovina">Bosnie et Herzegovina</option>
        <option value="Botswana">Botswana</option>
        <option value="Bresil">Bresil</option>
        <option value="Brunei Darussalam">Brunei Darussalam</option>
        <option value="Bulgarie">Bulgarie</option>
        <option value="Burkina Faso">Burkina Faso</option>
        <option value="Burundi">Burundi</option>
        <option value="Cambodge">Cambodge</option>
        <option value="Cameroun">Cameroun</option>
        <option value="Canada">Canada</option>
        <option value="Cap-Vert">Cap-Vert</option>
        <option value="Chili">Chili</option>
        <option value="Chine">Chine</option>
        <option value="Chypre">Chypre</option>
        <option value="Cocos (Iles de Keeling)">Cocos (Iles de Keeling)</option>
        <option value="Colombie">Colombie</option>
        <option value="Comores">Comores</option>
        <option value="Congo">Congo</option>
        <option value="Cook Islands">Cook Islands</option>
        <option value="Coree (Nord)">Coree (Nord)</option>
        <option value="Coree (Sud)">Coree (Sud)</option>
        <option value="Costa Rica">Costa Rica</option>
        <option value="Cote D'Ivoire">Cote D'Ivoire</option>
        <option value="Croatia (Hrvatska">Croatia (Hrvatska</option>
        <option value="Cuba">Cuba</option>
        <option value="Danemark">Danemark</option>
        <option value="Djibouti">Djibouti</option>
        <option value="Dominica">Dominica</option>
        <option value="Egypte">Egypte</option>
        <option value="Emirats Arabes unis">Emirats Arabes unis</option>
        <option value="Equateur">Equateur</option>
        <option value="Erythree">Erythree</option>
        <option value="Espagne">Espagne</option>
        <option value="Estonie">Estonie</option>
        <option value="Etat de la Cite du Vatican (Saint-siège)">Etat de la Cite du Vatican (Saint-siège)</option>
        <option value="Etats-unis USA">Etats-unis USA</option>
        <option value="Ethiopie">Ethiopie</option>
        <option value="Fidji">Fidji</option>
        <option value="Finlande">Finlande</option>
        <option value="France" selected>France</option>
        <option value="Georgie">Georgie</option>
        <option value="Gabon">Gabon</option>
        <option value="Gambie">Gambie</option>
        <option value="Ghana">Ghana</option>
        <option value="Gibraltar">Gibraltar</option>
        <option value="Grèce">Grèce</option>
        <option value="Grenade">Grenade</option>
        <option value="Groenland">Groenland</option>
        <option value="Guam">Guam</option>
        <option value="Guatemala">Guatemala</option>
        <option value="Guinee">Guinee</option>
        <option value="Guinee equatoriale">Guinee equatoriale</option>
        <option value="Guinee-Bissau">Guinee-Bissau</option>
        <option value="Guyane">Guyane</option>
        <option value="Haïti">Haïti</option>
        <option value="Honduras">Honduras</option>
        <option value="Hong kong">Hong kong</option>
        <option value="Hongrie">Hongrie</option>
        <option value="Ile Christmas">Ile Christmas</option>
        <option value="Ile de Bouvet">Ile de Bouvet</option>
        <option value="Ile de la Norfolk">Ile de la Norfolk</option>
        <option value="Iles Caïman">Iles Caïman</option>
        <option value="Iles de Faroe">Iles de Faroe</option>
        <option value="Iles de Salomon">Iles de Salomon</option>
        <option value="Iles de Svalbard et de janv. Mayen">Iles de Svalbard et de janv. Mayen</option>
        <option value="Iles de Wallis et Futuna">Iles de Wallis et Futuna</option>
        <option value="Iles Falkland (Malvinas)">Iles Falkland (Malvinas)</option>
        <option value="Iles Heard et de McDonald">Iles Heard et de McDonald</option>
        <option value="Iles Marshall">Iles Marshall</option>
        <option value="Iles Maurice">Iles Maurice</option>
        <option value="Iles Turques et Caïques">Iles Turques et Caïques</option>
        <option value="Iles Vierges (Britanniques)">Iles Vierges (Britanniques)</option>
        <option value="Iles Vierges (USA)">Iles Vierges (USA)</option>
        <option value="Inde">Inde</option>
        <option value="Indonesie">Indonesie</option>
        <option value="Irak">Irak</option>
        <option value="Iran">Iran</option>
        <option value="Irlande">Irlande</option>
        <option value="Islande">Islande</option>
        <option value="Israel">Israel</option>
        <option value="Italie">Italie</option>
        <option value="Jamaïque">Jamaïque</option>
        <option value="Japon">Japon</option>
        <option value="Jordanie">Jordanie</option>
        <option value="Kazakhstan">Kazakhstan</option>
        <option value="Kenya">Kenya</option>
        <option value="Kiribati">Kiribati</option>
        <option value="Koweit">Koweit</option>
        <option value="Kyrgyzstan">Kyrgyzstan</option>
        <option value="Laos">Laos</option>
        <option value="Latvia">Latvia</option>
        <option value="Lesotho">Lesotho</option>
        <option value="Liberia">Liberia</option>
        <option value="Liban">Liban</option>
        <option value="Libye">Libye</option>
        <option value="Liechtenstein">Liechtenstein</option>
        <option value="Lithuanie">Lithuanie</option>
        <option value="Luxembourg">Luxembourg</option>
        <option value="Macau">Macau</option>
        <option value="Macedonia">Macedonia</option>
        <option value="Madagascar">Madagascar</option>
        <option value="Malaisie">Malaisie</option>
        <option value="Malawi">Malawi</option>
        <option value="Maldives">Maldives</option>
        <option value="Mali">Mali</option>
        <option value="Malte">Malte</option>
        <option value="Mariannes du Nord">Mariannes du Nord</option>
        <option value="Maroc">Maroc</option>
        <option value="Martinique">Martinique</option>
        <option value="Mauritanie">Mauritanie</option>
        <option value="Mayotte">Mayotte</option>
        <option value="Mexique">Mexique</option>
        <option value="Micronesie">Micronesie</option>
        <option value="Moldova">Moldova</option>
        <option value="Monaco">Monaco</option>
        <option value="Mongolie">Mongolie</option>
        <option value="Montserrat">Montserrat</option>
        <option value="Mozambique">Mozambique</option>
        <option value="Myanmar">Myanmar</option>
        <option value="Nepal">Nepal</option>
        <option value="Namibie">Namibie</option>
        <option value="Nauru">Nauru</option>
        <option value="Nicaragua">Nicaragua</option>
        <option value="Nigeria">Nigeria</option>
        <option value="Niger">Niger</option>
        <option value="Niue">Niue</option>
        <option value="Norvège">Norvège</option>
        <option value="Nouvelle caledonie">Nouvelle caledonie</option>
        <option value="Nouvelle-Zelande">Nouvelle-Zelande</option>
        <option value="Oman">Oman</option>
        <option value="Ouganda">Ouganda</option>
        <option value="peripheriques mineures des Etats-unis USA">peripheriques mineures des Etats-unis USA</option>
        <option value="Perou">Perou</option>
        <option value="Pakistan">Pakistan</option>
        <option value="Palau">Palau</option>
        <option value="Panama">Panama</option>
        <option value="Papouasie-Nouvelle-Guinee">Papouasie-Nouvelle-Guinee</option>
        <option value="Paraguay">Paraguay</option>
        <option value="Pays-Bas">Pays-Bas</option>
        <option value="Philippines">Philippines</option>
        <option value="Pitcairn">Pitcairn</option>
        <option value="Pologne">Pologne</option>
        <option value="Polynesie Française">Polynesie Française</option>
        <option value="Porto Rico">Porto Rico</option>
        <option value="Portugal">Portugal</option>
        <option value="Qatar">Qatar</option>
        <option value="Republique centrafricaine">Republique centrafricaine</option>
        <option value="Republique Dominicaine">Republique Dominicaine</option>
        <option value="Republique slovaque">Republique slovaque</option>
        <option value="Republique tchèque">Republique tchèque</option>
        <option value="Roumanie">Roumanie</option>
        <option value="Royaume-unis">Royaume-unis</option>
        <option value="Russie">Russie</option>
        <option value="Rwanda">Rwanda</option>
        <option value="Senegal">Senegal</option>
        <option value="S. Georgie et S. Sandwich Isls.">S. Georgie et S. Sandwich Isls.</option>
        <option value="Sahara occidental">Sahara occidental</option>
        <option value="Saint Kitts et Nevis">Saint Kitts et Nevis</option>
        <option value="Saint Lucia">Saint Lucia</option>
        <option value="Saint Pierre et Miquelon">Saint Pierre et Miquelon</option>
        <option value="Saint Vincent et Grenadines">Saint Vincent et Grenadines</option>
        <option value="Saint-Marin">Saint-Marin</option>
        <option value="Salvador">Salvador</option>
        <option value="Samoa">Samoa</option>
        <option value="Samoa americaines">Samoa americaines</option>
        <option value="Sao-Tome-et-Principe">Sao-Tome-et-Principe</option>
        <option value="Seychelles">Seychelles</option>
        <option value="Sierra Leone">Sierra Leone</option>
        <option value="Singapour">Singapour</option>
        <option value="Slovenie">Slovenie</option>
        <option value="Somalie">Somalie</option>
        <option value="Souaziland">Souaziland</option>
        <option value="Soudan">Soudan</option>
        <option value="Sri Lanka">Sri Lanka</option>
        <option value="St Pierre et Miquelon">St Pierre et Miquelon</option>
        <option value="St. Helena">St. Helena</option>
        <option value="Suède">Suède</option>
        <option value="Suisse">Suisse</option>
        <option value="Suriname">Suriname</option>
        <option value="Syrie">Syrie</option>
        <option value="Taiwan">Taiwan</option>
        <option value="Tajikistan">Tajikistan</option>
        <option value="Tanzanie">Tanzanie</option>
        <option value="Tchad">Tchad</option>
        <option value="Territoire britannique de l'Ocean Indien">Territoire britannique de l'Ocean Indien</option>
        <option value="Territoires meridionaux français">Territoires meridionaux français</option>
        <option value="Thaïlande">Thaïlande</option>
        <option value="Timor est">Timor est</option>
        <option value="Togo">Togo</option>
        <option value="Tokelao">Tokelao</option>
        <option value="Tonga">Tonga</option>
        <option value="Trinite-et-Tabago">Trinite-et-Tabago</option>
        <option value="Tunisie">Tunisie</option>
        <option value="Turkmenistan">Turkmenistan</option>
        <option value="Turquie">Turquie</option>
        <option value="Tuvalu">Tuvalu</option>
        <option value="Ukraine">Ukraine</option>
        <option value="Uruguay">Uruguay</option>
        <option value="Uzbekistan">Uzbekistan</option>
        <option value="Vanuatu">Vanuatu</option>
        <option value="Venezuela">Venezuela</option>
        <option value="Viet Nam">Viet Nam</option>
        <option value="Yemen">Yemen</option>
        <option value="Yougoslavie">Yougoslavie</option>
        <option value="Zaïre">Zaïre</option>
        <option value="Zambie">Zambie</option>
        <option value="Zimbabwe">Zimbabwe</option>
</select>
</div>
<br/>
<br/>
Rechercher : <input type="text" name=rech onkeyup="position();" id="rech"><br/>
<input type="button" value="selectionner" onclick="sel()" />
</body> 
</html>

pour le reste , je vais voir a utiliser l'input plutôt que la liste car cela risque d'être barbare de jouer sur le keyup du doc :)