Filtrer une liste des cases à cocher
Bonjour,
Est ce que vous pourriez me dire comment faire pour résoudre ce problème? j'essaie de filtrer la liste des éléments mais rien ne change, par exemple, en tapant "afg" la liste des pays doit se réduire à Afghanistan mais tous les pays s'affichent toujours sur la liste. Je crois que le problème se situe dans la fonction ListeCheck() mais je n'arrive pas à le trouver.
Merci d'avance
Voici le 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
<html><head>
<style type="text/css">
.container { border:2px solid #ccc; width:300px; height: 150px; overflow-y: scroll; }
.tete { width:300px;}
</style>
<script type="text/javascript">
var Liste=new CreerListe("Pays")
Liste.Add("Afghanistan");
Liste.Add("Afrique du sud");
Liste.Add("Albanie");
Liste.Add("Chili");
Liste.Add("Finlande");
Liste.Add("France");
Liste.Add("Gabon");
Liste.Add("Gambie");
Liste.Add("Honduras");
Liste.Add("Irlande");
Liste.Add("Islande")
Liste.Add("Italie");
Liste.Add("Japon");
Liste.Add("Jordanie");
Liste.Add("Lettonie");
Liste.Add("Liban");
Liste.Add("Malte");
Liste.Add("Maroc");
Liste.Add("Namibie");
function CreerListe(nom) {
this.nom=nom;
this.search="";
this.nb=0;
this.Add=AjouterItem;
this.Afficher=AfficherListe;
this.MAJ=MAJListe;
}
function AjouterItem(item) {
this[this.nb]=item
this.nb++;
}
function AfficherListe() {
var Z="<SPAN name="+this.nom+"><div class=\"container\">";
for (var i=0; i<this.nb; i++) {
Z+="<input type=\"checkbox\" value=\""+this[i]+"\" />"+this[i]+"<br/>";
}
Z+="</span></div>"
document.write(Z);
}
function MAJListe(txt,f) {
if (txt!=this.search) {
this.search=txt;
f.elements[this.nom].options.length=0;
for (var i=0; i<this.nb; i++) {
if ( this[i].substring(0,txt.length).toUpperCase()==txt.toUpperCase() ) {
var o=new Option(this[i], this[i]);
f.elements[this.nom].options[f.elements[this.nom].options.length]=o;
}
}
if (f.elements[this.nom].options.length==1) {
f.elements[this.nom].selectedIndex=0;
}
}
}
function ListeCheck() {
Liste.MAJ(document.forms["monform"].search.value,document.forms["monform"].getElementsByName["input"])
if (document.layers) {
setTimeout("ListeCheck()", 1001)
} else {
setTimeout("ListeCheck()", 100)
}
}
</script>
</head>
<div>
<input type="text" class="tete" onclick="javascript:hideshow(document.getElementById('tete1'))"/>
</div>
<div id="tete1" classe="psiu">
<form name="monform">
<input type="text" class="tete" name="search" /> <br />
<script type="text/javascript">
Liste.Afficher();
ListeCheck();
</script>
<div>
<input type="button" value="Ajouter" />
</div>
</form>
</div>
<script type="text/javascript">
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="none")
which.style.display="block"
else
which.style.display="none"
};
hideshow(document.getElementById('tete1'));
</script>
</body>
</html> |
