Web e Code Script

Suggerimenti compilazione campi con jQuery UI Autocomplete

jQuery UI Autocomplete

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>

Autocompletamento Input Text

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.




emoticons

avatar
Autore: Valerio Del Re

Dott. in Comunicazione e Pubblicità per le Organizzazioni,
Grafico e Web Designer freelance, CEO presso Robadagrafici


Cosa ne pensi? Esprimi la tua opinione.
Scrivi un commento.

Loading Facebook Comments ...

Ti potrebbero interessare anche:


font-awesome

Icon Font Awesome. Come inserire sul sito icone tramite font

Le icone sono ormai uno standard per chi realizza siti internet. Permettono infatti un’ottima personalizzazione per lo stile […]


testare-sito-mobile-online

Testare sito mobile online. Effettua il test con Google

Se sei un webdesigner sicuramente nell’ultimo periodo ti starai dedicando allo studio della tecnica del responsive design. Un […]


orologio-esadecimale

What colour is it? L’orologio esadecimale

Oggi vi segnalo un sito creativo, da veri nerd, per appassionati di grafica e web. Si tratta del […]


sfumature-css3

Come creare una sfumatura con CSS3

CSS3 ha tantissime potenzialità che ogni web designer dovrebbe conoscere per evitare di fare un uso spropositato di […]


css3-box-shadow

Ombra CSS3. Come aggiungerla a testo, div e immagini

CSS3 è una rivoluzione. Ci permette di aggiungere tanti effetti grafici agli oggetti presenti nelle nostre pagine web, […]


css3-border-radius

Come smussare angoli di immagini e div con CSS3 Border Radius

Con Html5 e CSS3 il mondo del web ha fatto un notevole passo avanti, offrendo un’esperienza più ricca […]


mappa-vettoriale-jquery

Mappa del mondo con ingrandimento in jQuery

Creare una mappa navigabile per il sito internet è diventata ormai pratica comune, specialmente quando si tratta di […]


atlas

Arriva Atlas, la concorrenza di Facebook a Google

È ufficiale: Google ha un concorrente. Si chiama Atlas ed è di proprietà di Facebook. Quest’ultimo aveva acquistato […]


jquery-document-ready-function

La base della sintassi di jQuery: $(document) .ready()

Se vi state avvicinando da poco a jQuery e state iniziando a studiarlo, avrete notato che spesso il […]


php-if-else

PHP: gestire le condizioni con le istruzioni if e else

Se state realizzando un sito nel linguaggio di programmazione Php, magari con il CMS WordPress, imparare a gestire […]


Shares

Robadagrafici.com non è una testata giornalistica in quanto viene aggiornato senza alcuna periodicità. Non può pertanto considerarsi prodotto editoriale ai sensi della legge 62/2001. Le immagini e i testi pubblicati sono valutati come di pubblico dominio: qualora il loro uso violasse diritti d'autore, lo si comunichi all'autore del blog che provvederà alla loro pronta rimozione.
Tutti i contenuti sotto Licenza Creative Commons. Marchi e loghi di soggetti terzi utilizzati in questo sito sono di proprietà esclusiva dei rispettivi proprietari.
Roba da Grafici © 2011-2016 - Progetto a cura di ServiziWeb Srl - Privacy & Cookies Policy