1235 visualizzazioniSuggerimenti compilazione campi con jQuery UI Autocomplete
Tempo di lettura: 4 min
Spesso ormai su internet ci troviamo di fronte a form, che implicano la compilazione di campi (gli input text). Questa porta via tempo nello scrivere e talvolta capita di saltare una lettera distrattamente e il form non funziona, quindi bisogna tornare a controllare i campi per correggere l’errore.
Uno strumento molto utile è l’autocompilazione dei campi attraverso jQuery UI Autocomplete, che ci permette durante la scrittura nell’input text di visualizzare, in un menu a tendina, suggerimenti di completamento della parola che si è iniziata a scrivere. Per farvi un esempio pratico che sarà noto a tutti, un pò come avviene per Google quando andiamo ad effettuare una ricerca.
Autocompletamento da un elenco di parole
Si tratta di un autocompletamento che si realizza semplicemente attraverso html e javascript, grazie ad un elenco di parole chiave da noi scelte. Può essere molto utile se sappiamo già quali sono gli elementi tra cui gli utenti dovranno scegliere nel compilare l’input text.
Un esempio pratico
Facciamo subito un esempio pratico, in modo che sia tutto chiaro e di facile intuizione.
Abbiamo realizzato un sito strettamente lombardo e abbiamo chiesto nel form di compilare il campo “provincia”. Sapremo già che le possibili scelte saranno limitate ad un numero ristretto: Bergamo, Brescia, Como, Cremona, Lecco, Lodi, Mantova, Milano, Monza e della Brianza, Pavia, Sondrio e Varese. Vediamo il codice dell’intera pagina e poi lo analizziamo in dettaglio.
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Province Lombardia</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("input#province").autocomplete({
source: ["Bergamo", "Brescia", "Como", "Cremona", "Lecco", "Lodi", "Mantova",
"Milano", "Monza e Brianza", "Pavia", "Sondrio", "Varese"],
minLength:2
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="province">Province: </label>
<input id="province" />
</div>
</body>
</html>
Come funziona il codice
Come avete visto il codice è molto semplice.
Abbiamo innanzitutto incluso tre file fondamentali per il funzionamento nell’head (in questo caso si tratta di file esterni ma nulla ci vieta di scaricarli e linkarli internamente al sito):
» jquery-ui.css : file di formattazione del menu a tendina
» jquery.js : librerie base di JQuery 1.8.3 (versione attuale)
» jquery-ui.min.js : funzioni per l’autocompletamento
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Fin qui niente di assolutamente difficile. A questo punto osserviamo una semplice array JavaScript. Con essa diciamo alla pagina di autocompletare i campi a partire dal secondo carattere (minLength:2). Questo perchè senza questa precisazione jQuery UI Autocomplete ci indicherebbe come suggerimento tutte le parole che hanno all’interno la prima lettera che inseriamo. Con due lettere invece si effettua già una prima scrematura. Abbiamo invece assegnato all’input l’id province, quindi se volessimo chiamarlo diversamente dobbiamo ricordarci di modificare #province in #xxx (laddove xxx sta per il nome che vogliamo assegnare all’id). Source raccoglie all’interno delle parentesi quadre l’elenco dei suggerimenti, ciascuno tra virgolette e diviso da una virgola. Vediamo il codice.
<script>
$(document).ready(function() {
$("input#province").autocomplete({
source: ["Bergamo", "Brescia", "Como", "Cremona", "Lecco", "Lodi", "Mantova",
"Milano", "Monza e Brianza", "Pavia", "Sondrio", "Varese"],
minLength:2
});
});
</script>
Infine non resta che collegare all’input text l’id che abbiamo scelto, nel nostro caso province.
<input id="province" /></html>
Opzioni aggiuntive
Abbiamo visto come utilizzare jQuery UI Autocomplete ma è possibile anche personalizzarlo in molti modi o anche ricercare dei termini all’interno di un database. Per tutto questo vi invito a visitare la documentazione completa.
Dott. in Comunicazione e Pubblicità per le Organizzazioni. Sono l'ideatore del blog Robadagrafici.com e mi occupo di comunicazione visiva, grafica e web, per le aziende.