Programmazione.it
jQuery Autocomplete, un plug-in per fornire suggerimenti nei form
Scritto da Rocco Galati il 30-11-2011 ore 11:38
Intel Parallel Studio XE
Sempre più spesso, le applicazioni web offrono agli utenti la possibilità di ottenere dei suggerimenti rapidi sui contenuti inseriti nei campi da completare, in modo da velocizzare le ricerche delle informazioni e aumentare la comodità d'uso.

Il plug-in Autocomplete di jQuery abilita l'utente a ottenere proposte riguardo i contenuti da ricercare fornendo dei criteri di suggerimento e filtraggio per ogni termine.

L'algoritmo impiegato dal plug-in inizia a cercare un possibile matching con un database non appena l'utente inserisce la prima parola da trovare, aggiungendo poi filtri successivi e più mirati se quest'ultimo arricchisce le informazioni scrivendo altri caratteri; data la sua efficienza, può essere impiegato per completare indirizzi, nomi di città e account.

Nel caso di piccole quantità di dati da ricercare, il plug-in può anche essere utilizzato in locale, mentre è consigliabile farlo da remoto se l'applicazione necessita di un database particolarmente ampio.

La proprietà più importante del plug-in, di cui è anche possibile scaricare del codice dimostrativo è source, che contiene i valori da suggerire e che può essere riferita a un vettore, un URL o un metodo.

Nella situazione in cui la proprietà sia riferita a un vettore JavaScript, la forma di quest'ultima deve essere del tipo: [ 'voce 1', 'voce N' ], quindi un esempio potrebbe essere quello presentato nel seguito:
[code=c]<je:Autocomplete ID="aA" runat="server" Source="[ 'programma','programmazione','programmazione.it' ]">
</je:Autocomplete>[/code]
Questo codice consente di visualizzare i suggerimenti specificati quando viene riconosciuta una sequenza di caratteri valida inserita dall'utente. I suggerimenti possono essere inseriti anche tramite URL, che ritorna comunque un vettore:
[code=javascript]<je:Autocomplete ID="aA" runat="server"
Source="'http://esempio.com/source.js'">
</je:Autocomplete>[/code]
Se si sceglie questa strada occorre fare attenzione a utilizzare gli apici singoli per racchiudere l'indirizzo altrimenti verrà generato un errore. L'ultima possibilità, la più comoda da usare, è quella basata sul metodo che utilizza SourceAsync e richiama il file contenente l'intero dataset dalla posizione indicata solo all'occorrenza.
[code=javascript]<je:Autocomplete ID="k" runat="server"
SourceAsync-Url="google_getitem.ashx">
</je:Autocomplete>[/code]
Copyright Programmazione.it® 1999-2005. Tutti i diritti riservati. Testata giornalistica iscritta col n. 569 presso il Tribunale di Milano in data 14/10/2002.