Jojoxx.net

 

 

AnvändareAnvändare
Besökare just nu: 85
SnabblänkarSnabblänkar
JavaScript-arkivet
Perl
FAQ
Sök på Jojoxx.netSök på Jojoxx.net



Lista med autoselect

Exempel


Kod


<script type="text/javascript">
var ignorevw=false; // Skall V eller W ignoreras?
var ignorecase=false; // Skall matchningen vara cAsE-sensitive?
var lista = new Array();
function searchlist(value,listobj){
	if(lista.length == 0) buildlist(listobj);
	matches=0;
	listobj.length = lista.length;
	for(n=0;n<lista.length;n++){
		if(lista[n].text.substring(0,value.length)==value||ignorevw&&lista[n].text.substring(0,value.length).replace(/w/g,'v')==value.replace(/w/g,'v')||ignorecase&&lista[n].text.toLowerCase().substring(0,value.length)==value.toLowerCase()) {
			listobj[matches].text = lista[n].text;
			listobj[matches].value = lista[n].value;
			matches++;
		}
	}
	listobj.length = matches;
	listobj.selectedIndex=0;
}
function buildlist(obj){
	for(n=0;n<obj.length;n++){
		lista[n] = new makeobj(obj[n].value,obj[n].text);
	}
}
function makeobj(value,text){
	this.value=value; this.text=text;
}
</script>

<form>
<input type="text" name="search" onKeyUp="searchlist(this.value,this.form.lista);" onKeyPress="searchlist(this.value,this.form.lista);" style="width: 150px;"><br>
<select name="lista" size="4" onChange="this.form.search.value=this[this.selectedIndex].value;" style="width: 150px;">
<option value="apelsin">apelsin</option>
<option value="apelsinsaft">apelsinsaft</option>
<option value="banan">banan</option>
<option value="bananskal">bananskal</option>
<option value="citron">citron</option>
<option value="citronskiva">citronskiva</option>
<option value="citronsaft">citronsaft</option>
</select>
</form>

Kommentar

Scriptet letar reda på vilka val i selectlistan som kan stämma överens med det som användaren fyller i ett vanligt textfält. Listan uppdateras efter varje tecken som fylls i text-fältet. Väljer användaren en post i listan flyttas automatiskt det värdet till text-fältet. Ifrån text-fältet anropas funktionen searchlist på samma sätt från de båda eventen onKeyUp och onKeyPress. Det första argumentet skall alltid vara this.value (för att skicka med aktuellt värde) och det andra argumentet är objektetnamnet på listan (this.form.fältnamn). Fältet lista har bara ett event, onChange, vilket kopierar vald post i listan till text-fältet.

,