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
|
<html>
<head>
<script language="javascript">
//--- (C) Copyright danyboy85 (ca c'est pour la déconne)
var tab;
//--- J'appelle cette fonction au lancement de la page pour initialiser le tableau "tab"
function init() {
tab = new Array("Francois", "Fabrice", "Fatima", "Bernard", "Bernadette", "Benabar", "Dany", "David");
}
//--- Fonction appelée lors de l'événement onkeyup() de la zone de texte
function go(valeur) {
var sel = document.getElementById("sel");
//--- Vidage de la liste déroulante
while (sel.childNodes.length>0) {
sel.removeChild(sel.childNodes[0]);
}
//--- On parcours le tableau et on regarde si la chaine "valeur" commence par la valeur d'un item du tableau
for (var i=0; i<tab.length; i++) {
if (startsWith(tab[i], valeur)) {
//--- Si oui un génère un nouvel <option> et on l'ajoute à la liste déroulante
var o = new Option(tab[i], tab[i]);
o.innerText = tab[i];
sel.appendChild(o);
}
}
}
//--- Retourne vrai si la chaine s1 commence par la chaine s2
function startsWith(s1, s2) {
if (!s2) {return false;}
s2 += '';
var intLength = s2.length;
return (s1.substr(0, intLength).toLowerCase() == s2.toLowerCase());
}
</script>
</head>
<body onload="init()">
<input type="text" id="txt" onkeyup="go(this.value)">
<select id="sel">
</select>
</body>
</html> |
Mise à jour d'une liste déroulante à partir d'un textbox
Répondre avec citation
Partager