Quando si scrive un nuovo messaggio su Outlook e si inserisce il nome del destinatario, se questo è presente in rubrica, appare scritto dopo aver inserito le prime lettere del nome. Analogamente in molte applicazioni per la gestione dei clienti, si dà spesso la possibilità all'utente di inserire le prime lettere del nome di un cliente, ed ecco che questo appare.
Vediamo come ricreare questo effetto in una pagina WEB. Lo script si basa su un menu a scelta multipla che contiene un elenco di nomi, e su una textbox. Man mano che si digitano le lettere nella textbox, nel menu a tendina restano solo i nomi che iniziano con le lettere digitate.
Il primo passo è quello di caricare i valori da far apparire nel menu a tendina in un array. Se si conosce il numero di valori da inserire nel menu, si può usare un array statico; in generale però consiglio di usare un array dinamico, perchè rende più facile l'aggiunta o la cancellazione dei valori.
<script language="VBScript">
dim clienti()
redim preserve clienti(0)
clienti(0)="ROSSI MARIO"
redim preserve clienti(1)
clienti(1)="ALBERTILUCA"
redim preserve clienti(2)
clienti(2)="GRIGI LUCA"
redim preserve clienti(3)
clienti(3)="NERI DARIO"
redim preserve clienti(4)
clienti(4)="VERDI GIUSEPPE"
redim preserve clienti(5)
clienti(5)="ROSSO ELISABETTA"
redim preserve clienti(6)
clienti(6)="BLU GANDOLFO"
redim preserve clienti(7)
clienti(7)="ROMA MIRELLA"
redim preserve clienti(8)
clienti(8)="MILANO MARCO"
redim preserve clienti(9)
clienti(9)="TORINO ANNA"
redim preserve clienti(10)
clienti(10)="PESCARA GIANNANDREA"
</script>
Per quanto possa sembrare senza senso l'uso di un array dinamico, si vedrà nella parte finale dell'articolo i motivi che hanno portato a questa scelta. Ora non ci resta che caricare questi valori all'interno di un campo SELECT. Questo campo va costruito dinamicamente. Per farlo, delimitiamo l'area dove vogliamo che appaia la lista con i tag: <div id="lista"></div> Adesso tramite la proprietà innerHTML andiamo a inserire il campo <select>
lista.innerHTML="<select name=""listaclienti"" size=""4"" id=""cliente"" style=""width:300""></select>"
Conviene assegnare una larghezza fissa al campo, in modo che non dipenda dal suo contenuto. Nell'esempio il campo mostrerà 4 risultati alla volta, ma il valore è indifferente: invece di funzionare come ListBox potrebbe essere usata come DropDown (per chi non conoscesse questi temini la ListBox quella che appare con l'esempio, la DropDown è quella che si avrebbe omettendo l'attributo size) Siamo giunti al caricamento della campo grazie a questo ciclo:
dim opt
for c=0 to ubound(clienti)
set opt = document.createElement("<option>")
opt.value=idclienti(c)
opt.text=clienti(c)
listaclienti.add opt
next
Affrontati i blocchi separatamente, ecco di seguito riassunto il codice:
<html>
<head>
<title>Menù</title>
<script language="VBScript">
dim clienti()
redim preserve clienti(0)
clienti(0)="ROSSI MARIO"
redim preserve clienti(1)
clienti(1)="ALBERTILUCA"
redim preserve clienti(2)
clienti(2)="GRIGI LUCA"
redim preserve clienti(3)
clienti(3)="NERI DARIO"
redim preserve clienti(4)
clienti(4)="VERDI GIUSEPPE"
redim preserve clienti(5)
clienti(5)="ROSSO ELISABETTA"
redim preserve clienti(6)
clienti(6)="BLU GANDOLFO"
redim preserve clienti(7)
clienti(7)="ROMA MIRELLA"
redim preserve clienti(8)
clienti(8)="MILANO MARCO"
redim preserve clienti(9)
clienti(9)="TORINO ANNA"
redim preserve clienti(10)
clienti(10)="PESCARA GIANNANDREA"
</script>
</head>
<body>
<div id="lista"></div>
<script language="vbscript">
lista.innerHTML = "<select name=""listaclienti"" size=""4"" id=""idtessera"" style=""width: 300""></select>"
for c=0 to ubound(clienti)
dim opt
set opt = document.createElement("<option>")
opt.value=clienti(c)
opt.text=clienti(c)
listaclienti.add opt
next
</script>
</body>
</html>
Il risultato è visualizzabile nel primo esempio
Dopo la creazione del campo SELECT non ci resta che filtrare i dati attraverso la textbox.
Per farlo inseriamo lo script per il caricamento del campo in una funzione. Questa funzione accetterà in ingresso dei caratteri che verranno usati per filtrare i nomi che avranno questi caratteri come iniziali. Chiamiamo la funzione "genera":
function genera(iniziali)
lista.innerHTML="<select name=""listaclienti"" size=""4"" id=""idtessera""
style=""width:300""></select>"
for c=0 to ubound(clienti)
dim opt
set opt = document.createElement("<option>")
opt.value=clienti(c)
opt.text=clienti(c)
listaclienti.add opt
next
end function
Per filtrare aggiungiamo all'interno del ciclo un controllo:
function genera(iniziali)
lista.innerHTML="<select name=""listaclienti"" size=""4"" id=""idtessera"" style=""width:
300""></select>"
numero_caratteri=len(iniziali)
for c=0 to ubound(clienti)
if ucase(left(clienti(c),numero_caratteri)) = ucase(iniziali) then
dim opt
set opt = document.createElement("<option>")
opt.value=clienti(c)
opt.text=clienti(c)
listaclienti.add opt
end if
next
end function
La funzione è stata fatta in modo da non distinguere lettere maiuscole e minuscole; nel caso si volesse distinguerle, basterà eliminare il comando Ucase dal controllo. Per pulizia del codice, spostiamo la funzione nell'head assieme al caricamento dell'array.
Ora occorre richiamare la funzione: la prima volta, al caricamento della pagina (in questo caso dovrà mostrare tutti i valori, per cui richiamo la funzione con genera("")); successivamente vogliamo richiamare la funzione passandole le iniziali dei nomi che ci interessano. Le iniziali verranno scritte in una area di testo (textbox).
Per rendere l'effetto più gradevole, richiamiamo la funzione sull'evento onkeyup, per cui ad ogni inserimento di una iniziale il campo select cambierà
Il risultato è visualizzabile nel secondo file
Tutto ottenuto senza ricaricare mai la pagina!
Nella pratica io ho usato questo effetto con lunghi elenchi di voci, che come abbiamo visto possono essere semplicemente filtrati dalla textbox. Questi elenchi normalmente derivano da un database. Chi ha già interfacciato una tabella con una pagina WEB sa che il database restituisce un recordset, cioè un elenco di voci come un array. Questo recordset va inserito all'interno dell'array clienti come abbiamo fatto precedentemente.
Con linguaggi come ASP o PHP posso fare dei cicli che automaticamente mi carichino l'array clienti. Questo ciclo dovrà essere ripetuto tante volte quanti sono i valori nel recordset. Non conoscendo a priori questo valore, andiamo ad inserire i valori nell'array cliente in modo dinamico. Questo è il motivo per cui si usa un array dinamico. Ecco un estrapolato di codice realizzato in PHP che va a caricare l'array clienti:
<?
$x = 0;
$sql = "SELECT * FROM tessere ORDER BY Cliente";
$result = mysql_db_query ("Reporter",$sql);
while ($row = mysql_fetch_array ($result)) {
print "redim preserve clienti(".$x.")n";
print "clienti(".$x.")="".$row["Cliente"].""n";
$x=$x+1;
}
mysql_free_result ($result);
?>
Chiaramente questo codice funziona con una pagina caricata da un ServerWeb, perchè ASP e PHP sono linguaggi lato server.
Si consideri inoltre che il comando SELECT * FROM..... , per la richiesta di
dati al database, viene eseguito solo al caricamento della pagina; durante l'inserimento delle iniziali, la pagina non si ricarica e chi lavora é il browser dell'utente.
Ho usato questo stratagemma per la prima volta per un sito basato su Access. Questo sito per ogni richiesta al database lasciava l'utente fermo per interminabili secondi. Non ricaricando più la pagina, la lunga attesa veniva fatta solo all'inizio. Se creo l'array clienti da un database, probabilmente ad ogni voce è associato un numero identificativo. In questo caso nella Select si vorrà inserire come valore il numero e come etichetta il nome del cliente. Per farlo occorre creare un secondo array chiamato ad esempio idclienti e la funzione genera va modificata in questo modo:
function genera(iniziali)
lista.innerHTML="<select name=""listaclienti"" size=""4"" id=""idtessera"" style=""width: 300""></select>"
numero_caratteri=len(iniziali)
for c=0 to ubound(clienti)
if ucase(left(clienti(c),numero_caratteri))=ucase(iniziali) then
dim opt
set opt = document.createElement("<option>")
opt.value=idclienti(c) 'MODIFICA
opt.text=clienti(c)
listaclienti.add opt
end if
next
end function
Questo permette a un form di inviare il numero identificativo anzichè il nome del cliente. Realizzando questo effetto in un form bisogna modificare il codice VBScript che richiama i campi in questo modo: listaclienti.add opt diventa document.NOMEFORM.listaclienti.add opt . Infine si noti che, ad ogni cambiamento nella textbox, la SELECT viene ricreata da capo. Si potrebbe usare il comando listaclienti.remove per eliminare i valori che non servono, ma da esperimenti fatti è una soluzione molto più lenta.
