如何过滤我的复选框列表?

时间:2016-05-02 10:07:21

标签: javascript html

好吧,我试图通过只显示包含我在文本框中写入的字符的项目来过滤列表,但此过滤器不起作用。当我写“afg”时,它应该只显示“阿富汗”。

谢谢

enter image description here

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

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;
}
		
.tete {
    width:300px;
}
<div>
	<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">
	      Liste.Afficher();
	      ListeCheck();
        </script>
        <div>
            <input type="button" value="Ajouter" />
        </div>
    </form>
</div>

<script type="text/javascript">

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

1 个答案:

答案 0 :(得分:0)

将行if( this[i].substring(0,txt.length).toUpperCase()==txt.toUpperCase() )更改为if( this[i].toUpperCase().indexOf( txt.toUpperCase() ) >= 0 )