Autor Zpráva
lift
Profil *
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
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
Oswald: Klobouk dolu!
Szucs
Profil
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 *
Díky moc, ty scripty jsou oba super!!!
Toto téma je uzamčeno. Odpověď nelze zaslat.