Web e code script visite 154

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

Come boicottare Internet Explorer in poche mosse

1 min Chi di voi realizza siti internet sarà il più delle volte…

webdesign

Web e code script

Icone di Natale 2017 in png e vettoriali da scaricare gratis

3 minSi avvicina la festività del Natale e noi creativi dobbiamo farci subito…

webdesign

Web e code script

TAG HTML | Principali tag di formattazione

3 min Abbiamo detto nel precedente articolo che all’interno di ogni pagina è…