Web e code script visite 79

Suggerimenti compilazione campi con jQuery UI Autocomplete

4 min

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.

Riproduzione riservata © La riproduzione è concessa solo citando la fonte con link all'articolo. Condividi l'articolo


Articolo a cura di: Del Re Valerio
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.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *



Potrebbe anche interessarti

webdesign

Web e code script

Internet Browsers – Fashion Addict

1 min Come sarebbero le donne se fossero i browser di internet? Questa…

webdesign

Web e code script

GOOGLE WEB FONTS | Google Font API cambia il web

1 min Con i web font la prospettiva prossima è quella di cambiare…

webdesign

Web e code script

Arriva Atlas, la concorrenza di Facebook a Google

2 minÈ ufficiale: Google ha un concorrente. Si chiama Atlas ed è di…