Autor Zpráva
lift
Profil *
#1 · Zasláno: 20. 4. 2005, 18:28:25
Odpovědět Citovat
Dejme tomu, že mám select naplněný třeba padesáti uživateli. A já bych potřeboval za pomocí editboxu, tak jak budu postupne vepisovat jméno, aby mi zobrazoval v selectu uživatelé podle abecedního pořádku.
např zadám : B => zobrazí v selectu: Bahnivý, Bažant, Bystrý,..
dále : Ba => zobrazí v selectu: Bahnivý, Bažant,

Prosím mohl by někdo helpnout? Díky moc za jakoukoliv radu
Oswald
Profil
#2 · Zasláno: 20. 4. 2005, 22:23:13
Odpovědět Citovat
Předpoklad je, že jsou jména v tom selectu seřazena podla abecedy.

Tady je funkční ukázka - http://www.webkitchen.cz/lab/js-dom/hledani-v-selectu.html 



<html>

	<head>

	<script type="text/javascript">

	

	function searchName()

	{

		var re, jmena, s;

		

		// select se jmeny

		jmena = document.getElementById('jmena'); 

		

		// hledaci policko

		s = document.getElementById('s'); 

		

		// sklada se hledany se retezec pouze z pismen?	

		if ( s.value && /^[a-zA-Z]/.test(s.value) ) {	

			// vytvorime RegExp

			re = new RegExp('^' + s.value, 'i'); 

			

			// projdeme vsechna jmena v selectu

			for (var i = 0; i < jmena.length; i++) {

				if(re.test(jmena[i].value)) {

					// jmeno zacina na hledany retezec

					// nastavime mu selected na true

					jmena[i].selected = true;

					return;

				}

			}

			

		} else {

		

			// hledany retezec je prazdny nebo obsahuje jine znaky nez pismena - vybereme prvni jmeno v selectu

			jmena[0].selected = true;	

			

		}

	}

	</script> 

</head>

<body>

	<form action='#'>

		<select id='jmena'>

			<option value="Beneš">Beneš</option>

			<option value="Černý">Černý</option>

			<option value="Dvořák">Dvořák</option>

			<option value="Fiala">Fiala</option>

			<option value="Hájek">Hájek</option>

			<option value="Horák">Horák</option>

			<option value="Jelínek">Jelínek</option>

			<option value="Král">Král</option>

			<option value="Kučera">Kučera 	</option>

			<option value="Marek">Marek</option>

			<option value="Němec">Němec</option>

			<option value="Novák">Novák</option>

			<option value="Novotný">Novotný</option>

			<option value="Pokorný">Pokorný</option>

			<option value="Pospíšil">Pospíšil</option>

			<option value="Procházka">Procházka</option>

			<option value="Růžička">Růžička</option>

			<option value="Sedláček">Sedláček</option>

			<option value="Svoboda">Svoboda</option>

			<option value="Veselý">Veselý</option>

		</select>

		<input id='s' onkeyup='searchName()' />

	</form>

</body>

</html>
habendorf
Profil
#3 · Zasláno: 20. 4. 2005, 22:36:02
Odpovědět Citovat
Oswald: Klobouk dolu!
Szucs
Profil
#4 · Zasláno: 21. 4. 2005, 07:14:59
Odpovědět Citovat
Ahoj, ja pouzivam toto"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250"/>
<title>Postupné zpřesňování vyběru</title>
<style type="text/css">
input {
width: 150px;
border: 1px solid black;
}
</style>
<script language="Javascript" type="text/javascript">
<!--
function SelObj(jmenoformulare,selname,textjmeno,str) {
this.jmenoformulare = jmenoformulare;
this.selname = selname;
this.textjmeno = textjmeno;
this.vyberrezezce = str || '';
this.vyberpole = new Array();
this.spusteni = spusteni;
this.bldspusteni = bldspusteni;
this.bldaktualizace = bldaktualizace;
}

function spusteni() {
if (this.vyberrezezce =='') {
for(var i=0;i<document.forms[this.jmenoformulare][this.selname].options.length ;i++) {
this.vyberpole[i] = document.forms[this.jmenoformulare][this.selname].options[i];
this.vyberrezezce += document.forms[this.jmenoformulare][this.selname].options[i].value+":" +
document.forms[this.jmenoformulare][this.selname].options[i].text+",";
}
}
else {
var tempArr = this.vyberrezezce.split(',');
for(var i=0;i<tempArr.length;i++) {
var prop = tempArr[i].split(':');
this.vyberpole[i] = new Option(prop[1],prop[0]);
}
}
return;
}
function bldspusteni() {
this.spusteni();
for(var i=0;i<this.vyberpole.length;i++)
document.forms[this.jmenoformulare][this.selname].options[i] = this.vyberpole[i];
document.forms[this.jmenoformulare][this.selname].options.length = this.vyberpole.length;
return;
}

function bldaktualizace() {
var str = document.forms[this.jmenoformulare][this.textjmeno].value.replace('^\\ s*','');
if(str == '') {this.bldspusteni();return;}
this.spusteni();
var j = 0;
pattern1 = new RegExp("^"+str,"i");
for(var i=0;i<this.vyberpole.length;i++)
if(pattern1.test(this.vyberpole[i].text))
document.forms[this.jmenoformulare][this.selname].options[j++] = this.vyberpole[i];
document.forms[this.jmenoformulare][this.selname].options.length = j;
if(j==1){
document.forms[this.jmenoformulare][this.selname].options[0].selected = true;
}
}
function nastaveni() {
obj1 = new SelObj('menuform','itemlist','entry');
obj1.bldspusteni();
}

// -->
</script>

</head>
<body onload="javascript:nastaveni()">

<h1>Postupné zpřesňování vyběru</h1>

<p>Zadejte hledaný výraz a postupně jej zpřesňujte:</p>
<form name="menuform" onSubmit="javascript:window.location = document.menuform.itemlist.options[document.menuform.itemlist.selected Index].value;return false;">
<input type="text" name="entry" onkeyup="javascript:obj1.bldaktualizace();" />
<br />
<select name="itemlist" size="5">
<option>a</option>
<option>a co</option>
<option>a co bude</option>
<option>a co bude se</option>
<option>a co bude se mnou</option>
<option>a další</option>
<option>a další má</option>
<option>a další má všechno</option>
<option>a naopak</option>
<option>a proto</option>
<option>abatyše</option>
<option>abdikovat</option>
<option>abeceda</option>
<option>abeceda znaků</option>
<option>b</option>
<option>ba ovšem</option>
<option>babička</option>
<option>babička je naše</option>
<option>babí lélo</option>
<option>bacil</option>
<option>bacil antraxu</option>
<option>bacil tenatu</option>
<option>bacil záškrtu</option>
<option>cedrový</option>
<option>cedrový háj</option>
<option>cedrový kopec</option>
<option>cedrový park</option>
</select>
</div></form>

</body>
</html>
lift
Profil *
#5 · Zasláno: 21. 4. 2005, 15:58:16
Odpovědět Citovat
Díky moc, ty scripty jsou oba super!!!
Časová prodleva: 20 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0