Wie kann ich meine Checkbox-Liste filtern?

Question

Nun, ich versuche, eine Liste zu filtern, indem nur Elemente angezeigt werden, die Zeichen enthalten, die ich in das Textfeld geschrieben habe, aber dieser Filter funktioniert nicht. Wenn ich "afg" schreibe, sollte nur "Afghanistan" angezeigt werden.

Danke

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) { 
 
\t this.nom=nom; 
 
\t this.search=""; 
 
\t this.nb=0; 
 
\t this.Add=AjouterItem; 
 
\t this.Afficher=AfficherListe; 
 
\t this.MAJ=MAJListe; 
 
} 
 

 
function AjouterItem(item) { 
 
\t this[this.nb]=item 
 
\t this.nb++; 
 
} 
 

 
function AfficherListe() { 
 
\t var Z="<SPAN name="+this.nom+"><div class=\"container\">"; 
 
\t for (var i=0; i<this.nb; i++) { 
 
\t \t Z+="<input type=\"checkbox\" value=\""+this[i]+"\" />"+this[i]+"<br/>"; \t 
 
\t } 
 
\t Z+="</span></div>" 
 
\t document.write(Z); 
 
} 
 

 
function MAJListe(txt,f) { 
 
\t if (txt!=this.search) { 
 
\t \t this.search=txt; 
 
\t \t f.elements[this.nom].options.length=0; 
 
\t \t for (var i=0; i<this.nb; i++) { 
 
\t \t \t if (this[i].substring(0,txt.length).toUpperCase()==txt.toUpperCase()) { 
 
\t \t \t \t var o=new Option(this[i], this[i]); 
 
\t \t \t \t f.elements[this.nom].options[f.elements[this.nom].options.length]=o; 
 
\t \t \t } 
 
\t \t } 
 
\t \t if (f.elements[this.nom].options.length==1) { 
 
\t \t \t f.elements[this.nom].selectedIndex=0; 
 
\t \t } 
 
\t } 
 
} 
 

 
function ListeCheck() { 
 
\t Liste.MAJ(document.forms["monform"].search.value,document.forms["monform"].getElementsByName["input"]) 
 
\t if (document.layers) { 
 
\t \t setTimeout("ListeCheck()", 1001) 
 
\t } else { 
 
\t \t setTimeout("ListeCheck()", 100) 
 
\t } 
 
} 
 

 
function hideshow(which){ 
 

 
    if (!document.getElementById) return; 
 
    if (which.style.display=="none") which.style.display="block"; 
 
    else which.style.display="none"; 
 
};

.container { 
 
    border:2px solid #ccc; 
 
    width:300px; 
 
    height: 150px; 
 
    overflow-y: scroll; 
 
} 
 
\t \t 
 
.tete { 
 
    width:300px; 
 
}

<div> 
 
\t <input type="text" class="tete" onclick="javascript:hideshow(document.getElementById('tete1'))"/> 
 
</div> 
 
<div id="tete1"> 
 
<form name="monform"> 
 
    <input type="text" class="tete" name="search" /> <br /> 
 
    
 
     <script type="text/javascript"> 
 
\t  Liste.Afficher(); 
 
\t  ListeCheck(); 
 
     </script> 
 
     <div> 
 
      <input type="button" value="Ajouter" /> 
 
     </div> 
 
    </form> 
 
</div> 
 

 
<script type="text/javascript"> 
 

 
hideshow(document.getElementById('tete1')); 
 
</script>

Answer 1

Änderungslinie if(this[i].substring(0,txt.length).toUpperCase()==txt.toUpperCase())-if(this[i].toUpperCase().indexOf(txt.toUpperCase()) >= 0)