listato dinamico con select e textfield

**faibo** · 21-09-2005, 11:53

Ho questo
<form name="form2">
<input type="text" name="textfield">

<select name="menu1" size="10">
<option>aa</option>
<option>ab</option>
<option>bc</option>
</select>
</form>

vorrei ke quando scrivo nel textfield mi vada a listare tutti gli elementi che iniziano x quel dato.

es:
scrivo nel textfield il carattere "a"
nel menu1 mi deve uscire solo gli elementi "aa" e "ab"

Come si fa?????

**Mich_** · 21-09-2005, 14:41

E` una delle cose piu` complesse da realizzare in JS.

L'argomento (con qualche variazione) e` gia` stato affrontato nel forum, per cui ti consiglio una ricerca (bottone in alto a dx).

Ti preannuncio che chi ci ha provato, non ha avuto la pazienza di arrivare fino in fondo (almeno cosi` mi par di ricordare).

**faibo** · 21-09-2005, 15:21

mi sapresti dire almeno la chiave da ricercare?

**var** · 21-09-2005, 15:51

codice:

<html>
<head>
<title>mutato</title>

<script language="JavaScript">

var elems=new Array();

function CaricaVettore() {
for (i=0; i<document.elenco.seleziona.options.length; i++)
elems[i]=document.elenco.seleziona.options[i].text;
}

function Genera(e,f) {
var j=0;
for (i=0; i<elems.length; i++)
if (elems[i].indexOf(e)==0)
{
f.seleziona.options[j]=new Option(elems[i], 'http://www.value-errato.it');
j++;
}
f.seleziona.options.length=j;
}

</script>

</head>

<body onLoad="CaricaVettore();">
<form name="elenco">



<input name="scegli" type="text" id="scegli" onKeyUp="Genera(this.value, this.form);">
</p>



<select name="seleziona" id="seleziona">
<option value="http://www.frequenze.it">Nomine Mutato</option>
<option value="http://www.html.it">Reale Augello</option>
<option value="http://www.html.it">Vatte la pesca</option>
<option value="http://www.html.it">Ulivo e Procione</option>
<option value="http://www.html.it">Uliveto</option>
</select>
</p>
</form>
</body>
</html>

roba di questo vecchio thread (aaah, bei tempi...).

**Mich_** · 21-09-2005, 15:53

Butto li` i primi termini che userei io.

select digit* selezione selectedIndex lettera inizi*

**badaze** · 21-09-2005, 16:15

Puoi provare cosi.

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
function searchText(e) {
 //--------- Stringa di ricerca
 searchStr=document.getElementById('searchText').value;
 if (e == null) {
  if (event.keyCode != 8) {
   searchStr = searchStr + String.fromCharCode(event.keyCode);
  } // if (event.keyCode != 8)
 } else {
  if (e.which != 8) {
   searchStr = searchStr + String.fromCharCode(e.which);
  } else {
   searchStr = searchStr.substr(0,searchStr.length-1); 
  } // if (e.which != 8) 
 } // if (window.event != null)
 
 //--------- Svuoto le opzioni della select per il risultato
 document.getElementById('mySelect').innerHTML = '';

 //--------- Cerco solo se la stringa di ricerca non è vuota
 if (searchStr != '') {
  //--------- Select di destino
  destSel   = document.getElementById('mySelect');
  
  //--------- Cerco nella select nascosta
  oSelNas   = document.getElementById('selNascosta');
  numElem   = oSelNas.length;
  for (i=0;i<numElem;i++) {
   var curOpt = oSelNas.options.item(i);
	 if (curOpt.value.substr(0,searchStr.length) == searchStr) {
 	  var newOpt = document.createElement('OPTION');
	  ind        = destSel.options.length;
 	  destSel.options.add(newOpt,ind);
          newOpt.value     = curOpt.value;
	  newOpt.text      = curOpt.text;		
	 } // if (curOpt.value.substr(0,searchStr.length) == searchStr)
  } // for (i=0;i<numElem;i++)
 } // if (searchStr != '')
 
} // function searchText()
//-->
</script>

</head>
<body>

<select id="selNascosta" name="selNascosta" style="display:none">
 <option value="aaaaa">aaaaa</option>
 <option value="aabaa">aabaa</option>
 <option value="aaaba">aaaba</option>
 <option value="aaaab">aaaab</option>
 <option value="baaaa">baaaa</option>
 <option value="babaa">babaa</option>
 <option value="baaba">baaba</option>
 <option value="aaaac">aaaac</option>
 <option value="babab">babab</option>
 <option value="aaaad">aaaad</option>
 <option value="baaad">baaad</option>
 <option value="baaac">baaac</option>
 <option value="caaaa">caaaa</option> 
</select> 


<table summary="">
 <tr>
  <td>Testo : </td>
  <td><input type="text" id="searchText" size="25"></td>
 </tr>
 <tr>
  <td>
  </td>
  <td>
   
   <select id="mySelect" name="mySelect" size="10" style="width:100px">
   </select>
  </td>
 </tr>	 
</table>

<script language="JavaScript" type="text/javascript">
<!--
//--------- Assegnazione dell'evento onkeypress del text box
document.getElementById('searchText').onkeypress = searchText;
//-->
</script>

</body>
</html>

Discussione: listato dinamico con select e textfield

Strumenti discussione

Ricerca discussione

Visualizza

listato dinamico con select e textfield

Permessi di invio