| ||||||||||||||||
 StaffScripts Popolare una SELECT tramite un campo testo | |||||||||||||||||||||||||
| Autore: Riccardo | Data: 15/04/2002 | Downloads: 738 | Voto: 3/5 | Download | P r o v a | ||||||||||||||||||||
|
Come popolare una SELECT multipla tramite un campo testo.
Lo script in questa scheda non ha un'immediata utilità pratica. È più che altro un'estensione di quello pubblicato il 20 marzo che consentiva di sfogliare la SELECT digitando un un textfield.
La differenza è che questa volta la lista all'inizio è vuota e viene riempita man mano pescando in un array gli elementi che iniziano con le lettere che andremo a scrivere nel campo testo. Vediamo subito il sorgente: <HTML> <HEAD> <TITLE>http://www.jsdir.com - Popolare una lista con un TextBox</TITLE> <HEAD> <SCRIPT> <!-- var ArrStati = new Array("Albania","Algeria","American Samoa",....,"Zambia","Zimbabwe") function Cerca() { with (document.modulo) { StringToSearch=input.value; StringToSearchLength=StringToSearch.length; while (stati.options.length > 0) stati.options[0]=null; if (StringToSearchLength>0) for (i=0;i<ArrStati.length;i++) ArrStati[i].toLowerCase().substring(0,StringToSearchLength)==StringToSearch? [... ...] stati.options[stati.options.length]=new Option(ArrStati[i],ArrStati[i]):null; } } //--> </SCRIPT> </HEAD> <BODY BGCOLOR="#ffffff"> <FORM NAME="modulo"> <INPUT TYPE="text" NAME="input" VALUE="Scrivi..." CLASS="" onKeyUp="Cerca()" onFocus="this.select()"> <BR> <SELECT NAME="stati" size=5><OPTION> ... ... </OPTION></SELECT> </FORM> </BODY> </HTML>Ho riutilizzato l'elenco degli stati usato dell'altro script, in una situazione reale la lista potrebbe ad esempio essere riempita con delle pietanze, o dei programmi di cui sono disponibili varie versioni, o delle foto con nome simile.... Qui la lista è inizialmente vuota. L'unica opzione presente contiene solo un buon numero di spazi in modo che la tendina sia sufficientemente larga da consentirne poi la lettura. Questo è in effetti necessario solo per Netscape, in quanto Explorer poi allarga automaticamente la finestra. L'altro elemento fondamentale del form è il campo testo cui vengono associati due event-handler. onFocus serve a selezionare completamente il campo quando viene selezionato per la scrittura, in questo modo per una nuova selezione non sarà necessario cancellare manualmente il testo già contenuto. Il secondo (onKeyUp) attiva la funzione di riempimento ogni volta che viene scritto un carattere. La funzione Cerca() è di fatto molto semplice. Alla variabile StringToSearch viene assegnato il testo digitato, ed a StringToSearchLength viene assegnata la lunghezza. Il ciclo while () provvede a cancellare tutta la lista prima che venga riempita di nuovo, poi se almeno un carattere è stato digitato nel textfield parte la ricerca vera e propria. Il ciclo for () alla riga successiva scorre tutto l'array ArrStati e controlla che i primi "StringToSearchLength" caratteri dell'elemento sotto esame siano uguali alla stringa digitata. In questo caso viene creata nella SELECT una nuova opzione alla quale viene assegnato, nel nostro caso, lo stesso valore (il nome dello stato) sia come "value" che come "text". Per dettagli su come si effettua questo riempimento si può vedere lo script Popolare una <SELECT>. Ogni volta che viene digitato un carattere la lista viene dunque aggiornata fino a che rimarrà un'unica scelta, se viene trovata, oppure nessuna. Altrimenti l'utente, quando saranno visibili le ultime possibilità rimaste secondo la sua ricerca, potrà definitivamente selezionare fra quelle visualizzate. | |||||||||||||||||||||||||
| |||||||||||||||||||||||||
| Per navigare correttamente il sito è necessario abilitare i cookies. |
| Enjoy Open Source! |
Stampa
Segnala 
Preferiti 
