Filtrer une liste des cases à cocher

Invité · 02/05/2016, 12h33

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 :

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
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>

**Christophe P.** · 02/05/2016, 17h34

Bonjour,

avez-vous vérifié les paramètres envoyés à la fonction MAJ (en les affichant dans la console (console.log) par exemple) ?

Il n'y a pas d'élément s'appelant "input" alors qu'il est passé en paramètre de MAJ (document.forms["monform"].getElementsByName["input"]), et s'il y en avait un ce serait une mauvaise idée.
Pour les paramètres lors de l'appel de MAJ, pourquoi n'utilisez-vous pas document.getElementById ?

Invité · 03/05/2016, 09h08

Bonjour,

Merci pour votre réponse, en fait le probleme était dans la fonction MAJ comme vous avez dit, je l'ai modifié et ça marché

Filtrer une liste des cases à cocher

JavaScript

Discussions similaires

Partager

Partager