Scorrere lista [JS]

**mrcanoa** · 22-09-2004, 14:23

Ciao lista,

il titolo non è proprio adatto ma non sapevo come descriverlo.

Dovrei creare una paginetta con un campo text per ricercare dei nominativi.

Avevo trovato un js su jsdir che in base alle lettere inserite scorreva un campo select.Allego codice

codice:

<HTML>
<HEAD>
	<TITLE>Selezione da una lista digitando i caratteri in un TextBox</TITLE>
<HEAD>
<SCRIPT>
<!--
function Cerca()
	{
	with (document.modulo)
		{
		ThisFind=-1;
		StringToSearch=input.value;
		StringToSearchLength=StringToSearch.length;
		if (StringToSearchLength>0)
			for (i=0;i<stati.options.length;i++)
				ThisFind==-1&&stati.options[i].text.toLowerCase().substring(0,StringToSearchLength)==StringToSearch?ThisFind=i:null;
		else
			ThisFind=0;

		stati.selectedIndex=ThisFind;
		} 
	}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ffffff">
<FORM NAME="modulo">
<INPUT TYPE="text" NAME="input" VALUE="Scrivi..." CLASS="" onKeyUp="this.value=this.value.toLowerCase();Cerca()" onFocus="this.select()"> 

<SELECT NAME="stati" size="5">
<OPTION>Albania</OPTION>
<OPTION>Cayman Islands</OPTION>
<OPTION>Central African Rep.</OPTION>
<OPTION>Chad</OPTION>
<OPTION>Chile</OPTION>
<OPTION>China</OPTION>
<OPTION>Christmas Island</OPTION>
<OPTION>Gambia</OPTION>
<OPTION>Georgia</OPTION>
<OPTION>Germany</OPTION>
<OPTION>Ghana</OPTION>
<OPTION>Gibraltar</OPTION>
<OPTION>Great Britain (UK)</OPTION>
<OPTION>Greece</OPTION>
<OPTION>Greenland</OPTION>
<OPTION>Grenada</OPTION>
<OPTION>Guadeloupe (Fr.)</OPTION>
<OPTION>Guam (US)</OPTION>
<OPTION>Guatemala</OPTION>
<OPTION>Guinea</OPTION>
<OPTION>Guinea Bissau</OPTION>
<OPTION>Guyana</OPTION>
<OPTION>Italy</OPTION>
<OPTION>Ivory Coast</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>

E' possibile creare una cosa simile ma non con le select?Quindi scrivo nel campo testo e mano mano scorre i campi nella table.

Spero di essermi spiegato

Grazie David

**badaze** · 22-09-2004, 14:54

Intendi un <table></table> ?

**mrcanoa** · 22-09-2004, 15:00

Si genero dinamicamente una table:

<table>
<loop della query>
<tr>
<td>
nome - cognome
</td>
</tr>
</fine loop>

Nel campo di testo mano mano scrivo s lui scorre la table come se fosse la select dell'esempio che ho allegato prima.
Non so se hai mai visto programmi di magazzino.Apri la finestra con dettaglio prodotti e scorri con freccia su e giu i vari record .vorrei fare una cose del genere.

Che dite??

**badaze** · 22-09-2004, 15:53

Ti propongo questo....

codice:

<HTML>
<HEAD>
	<TITLE>Selezione da una lista digitando i caratteri in un TextBox</TITLE>
<HEAD>
<style type="text/css">
<!--
.inverted {color:white;background-color:navy} 
-->
</style>

<SCRIPT>
<!--
var previousRow = null;
function find() {
 if (previousRow != null) {
  previousRow.className = "";
 } // if (previousRow != null)
 stringToFind = document.getElementById('input1').value;
 stringToFind = stringToFind.toLowerCase();
 rows         = document.getElementById('stati').rows.length;
 for (i=0;i<rows;i++) {
  currentRow = document.getElementById('stati').rows.item(i)
  cells = currentRow.cells.length;
	//------------ si assume che la colonna da controllare sia la prima ovvero (1 - 1) = 0
	controlledCell = 0
	for (j=0;j<cells;j++) {
	 currentCell     = currentRow.cells.item(controlledCell);
	 currentCellText = currentCell.innerHTML;
	 currentCellText = currentCellText.toLowerCase();

	 if (stringToFind <= currentCellText) {
	  currentRow.className = "inverted";
		previousRow          = currentRow;
		return;
	 } // if (stringToFind <= currentCellText) 
	} // for (j=0;j<cells;j++)
 } //  for (i=0;i<rows;i++
 alert("non trovato");
} // function find()
//-->
</SCRIPT>

</HEAD>
<BODY BGCOLOR="#ffffff">
<FORM NAME="modulo">
<INPUT TYPE="text" NAME="input1" ID="input1" VALUE="Scrivi..." CLASS="" > 
<INPUT TYPE="button"  VALUE="Cerca" onclick="find()" >


<TABLE id="stati" NAME="stati" BORDER="1">
<TR><TD>Albania</TD></TR>
<TR><TD>Cayman Islands</TD></TR>
<TR><TD>Central African Rep.</TD></TR>
<TR><TD>Chad</TD></TR>
<TR><TD>Chile</TD></TR>
<TR><TD>China</TD></TR>
<TR><TD>Christmas Island</TD></TR>
<TR><TD>Gambia</TD></TR>
<TR><TD>Georgia</TD></TR>
<TR><TD>Germany</TD></TR>
<TR><TD>Ghana</TD></TR>
<TR><TD>Gibraltar</TD></TR>
<TR><TD>Great Britain (UK)</TD></TR>
<TR><TD>Greece</TD></TR>
<TR><TD>Greenland</TD></TR>
<TR><TD>Grenada</TD></TR>
<TR><TD>Guadeloupe (Fr.)</TD></TR>
<TR><TD>Guam (US)</TD></TR>
<TR><TD>Guatemala</TD></TR>
<TR><TD>Guinea</TD></TR>
<TR><TD>Guinea Bissau</TD></TR>
<TR><TD>Guyana</TD></TR>
<TR><TD>Italy</TD></TR>
<TR><TD>Ivory Coast</TD></TR>
</TABLE>
</FORM>

</BODY>
</HTML>

**mrcanoa** · 22-09-2004, 16:05

Quasi Perfetto.

Dici che non si riesce a scorrere con freccia su e giu i vari record, come se fosse select con size 5???

O

Dato che la finestra va in scroll e cliccando su cerca es italia, che non è visualizzata, posso far spostare lo scroll su quella cella selezionata???

Grazie Badaza...mito

**badaze** · 22-09-2004, 16:08

Non ho mai provato. Comunque penso sia fattibile. Se c'ho tempo daro' un occhiata.

**mrcanoa** · 22-09-2004, 17:11

Grazie mille Badaze.

In ogni caso sono in debito di una cena...

**badaze** · 22-09-2004, 17:16

Se continua cosi potro' andare a Roma per una settimana senza spendere un € in cibo.

**mrcanoa** · 22-09-2004, 17:39

Sarai mio ospite per il cibo...per la stanza si paga l'affitto di 5000€....che para....

**badaze** · 24-09-2004, 23:43

Originariamente inviato da mrcanoa
Quasi Perfetto.

Dici che non si riesce a scorrere con freccia su e giu i vari record, come se fosse select con size 5???

O

Dato che la finestra va in scroll e cliccando su cerca es italia, che non è visualizzata, posso far spostare lo scroll su quella cella selezionata???

Grazie Badaza...mito

Prova questo....

codice:

<HTML>
<HEAD>
	<TITLE>Selezione da una lista digitando i caratteri in un TextBox</TITLE>
<HEAD>
<style type="text/css">
<!--
.inverted {color:white;background-color:navy} 
-->
</style>

<SCRIPT>
<!--
var previousRow = null;
function find() {
 if (previousRow != null) {
  previousRow.className = "";
 } // if (previousRow != null)
 stringToFind = document.getElementById('input1').value;
 stringToFind = stringToFind.toLowerCase();
 rows         = document.getElementById('stati').rows.length;
 for (i=0;i<rows;i++) {
  currentRow = document.getElementById('stati').rows.item(i)
  cells = currentRow.cells.length;
	//------------ si assume che la colonna da controllare sia la prima ovvero (1 - 1) = 0
	controlledCell = 0
	for (j=0;j<cells;j++) {
	 currentCell     = currentRow.cells.item(controlledCell);
	 currentCellText = currentCell.innerHTML;
	 currentCellText = currentCellText.toLowerCase();

	 if (stringToFind <= currentCellText) {
	  currentRow.className = "inverted";
		previousRow          = currentRow;
		document.getElementById('container').scrollTop = currentRow.offsetTop;
		return;
	 } // if (stringToFind <= currentCellText) 
	} // for (j=0;j<cells;j++)
 } //  for (i=0;i<rows;i++
 alert("non trovato");
} // function find()
//-->
</SCRIPT>

</HEAD>
<BODY BGCOLOR="#ffffff">
<FORM NAME="modulo">
<INPUT TYPE="text" NAME="input1" ID="input1" VALUE="Scrivi..." CLASS="" > 
<INPUT TYPE="button"  VALUE="Cerca" onclick="find()" >


 <DIV ID="container" 
   STYLE="height:200px; width:150;z-index=100;font-family:verdana;font-size:9pt;overflow: auto;">
	<TABLE id="stati" NAME="stati" BORDER="1">
<TR><TD>Albania</TD></TR>
<TR><TD>Cayman Islands</TD></TR>
<TR><TD>Central African Rep.</TD></TR>
<TR><TD>Chad</TD></TR>
<TR><TD>Chile</TD></TR>
<TR><TD>China</TD></TR>
<TR><TD>Christmas Island</TD></TR>
<TR><TD>Gambia</TD></TR>
<TR><TD>Georgia</TD></TR>
<TR><TD>Germany</TD></TR>
<TR><TD>Ghana</TD></TR>
<TR><TD>Gibraltar</TD></TR>
<TR><TD>Great Britain (UK)</TD></TR>
<TR><TD>Greece</TD></TR>
<TR><TD>Greenland</TD></TR>
<TR><TD>Grenada</TD></TR>
<TR><TD>Guadeloupe (Fr.)</TD></TR>
<TR><TD>Guam (US)</TD></TR>
<TR><TD>Guatemala</TD></TR>
<TR><TD>Guinea</TD></TR>
<TR><TD>Guinea Bissau</TD></TR>
<TR><TD>Guyana</TD></TR>
<TR><TD>Italy</TD></TR>
<TR><TD>Ivory Coast</TD></TR>
</TABLE>
</div>
</FORM>

</BODY>
</HTML>

Discussione: Scorrere lista [JS]

Strumenti discussione

Ricerca discussione

Visualizza

Scorrere lista [JS]

Permessi di invio