L’autocompletamento di un campo, una nuova ui di jQuery (1/2)

Tra le novità introdotte recentemente da jQuery, troviamo finalmente (mancava proprio) un’estensione per l’autocompletamento dei campi form; sto parlando del metodo autocomplete appartenente alle user interface.
Questa ui permette, con la consueta disarmante semplicità, di implementare una ciliegina di usabilità nei nostri siti, come nell’esempio che puoi vedere.
Vuoi scoprire come?

Prepariamo il documento (x)html

Iniziamo con il preparare un documento che chiameremo index.html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Autocompletamento con jQuery</title>
</head>
<body>
    <input type="text" id="enter" />
</body>
</html>
 

Come vedi si tratta di un semplicissimo documento, nel quale ho inserito un campo di input con id enter.

Richiamare le librerie necessarie

Vediamo come impostare l’header della pagina index.html
Dovremo innanzi tutto richiamare jQuery:

<script src="jquery/jquery-1.4.2.js"></script>
 

In seguito, visto che si tratta di un user interface, certamente ne dovremo richiamare il core.

<script src="jquery/ui/jquery.ui.core.js"></script>
 

Se poi guardiamo nella documentazione (bisognerebbe sempre farlo), scopriamo che vi sono altre due dipendenze: ui.widget ed ui.position
Andiamo dunque ad aggiungerle

<script src="jquery/ui/jquery.ui.widget.js"></script>
<script src="jquery/ui/jquery.ui.position.js"></script>
 

Ed infine richiamiamo anche ui.autocomplete

<script src="jquery/ui/jquery.ui.autocomplete.js"></script>
 

Una piccola nota: le dipendenze vanno sempre richiamate prima dell’estensione che intendiamo utilizzare.

Ora, visto che si tratta di una user interface, colleghiamo anche il foglio di stile che, come ho già avuto modo di dire, è totalmente personalizzabile in maniera visuale nell’apposita sezione del sito di jQuery.

<link href="jquery/themes/base/jquery.ui.all.css" rel="stylesheet" />
 

Inserire il codice jQuery

A questo punto sviluppiamo la semplice funzione jQuery. Dovremo specificare su quale elemento, nel nostro caso input#enter, vogliamo applicare l’autocompletamento.

<script type="text/javascript">
    $(document).ready(function(){
        $("#enter").autocomplete();
});
</script>

In questo modo però non funzionerà ancora. Dobbiamo ovviamente ancora dire dove andare a prendere i dati che verranno poi visualizzati sotto il campo. Lo faremo tramite il parametro source che chiaramente è obbilgatorio definire.

Il caso più semplice è quello di passare a source un’array contenente i dati.

var parole = ["casa", "cane", "bene", "barba"];
 

Ed ora basterà passare l’array parole come source.

$(document).ready(function(){
    var parole = ["casa", "cane", "bene", "barba"];
    $("#enter").autocomplete({
        source: parole
        });
    });
 

Ora, come puoi anche vedere nell’esempio, inserendo “b” compariranno come possibilità “bene” e “barba”. Se continuiamo, e scriviamo “ba” rimarrà solo barba.

La pagina completa dovrebbe ora risultare così

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <script src="jquery/jquery-1.4.2.js"></script>
    <script src="jquery/ui/jquery.ui.core.js"></script>
    <script src="jquery/ui/jquery.ui.widget.js"></script>
    <script src="jquery/ui/jquery.ui.position.js"></script>
    <script src="jquery/ui/jquery.ui.autocomplete.js"></script>
    <link href="jquery/themes/base/jquery.ui.all.css" rel="stylesheet" />

    <script>
        $(document).ready(function(){
            var parole = ["casa", "cane", "bene", "barba"];
            $("#enter").autocomplete({
                source: parole
            });
        });
    </script>
    <title>Autocompletamento con jQuery</title>
</head>
<body>
    <input type="text" id="enter" />
</body>
</html>
 

Vediamo alcuni parametri

Come sempre, è possibile configurare ulteriormente lo svolgimento del processo attraverso i parametri messi a disposizione dal plugin.
Pensiamo ad esempio se nella nostra lista vi fossero 100 parole che iniziano con la “b”. Come potremmo fare per evitare una finestra lunghissima sotto il nostro campo scrivendo la lettera “b”?
Possiamo utilizzare il parametro minLength (di default settato ad 1), con il quale indichiamo dopo quanti caratteri inizializzare l’autocompletamento.
Dunque, riscrivendo il codice in questo modo:

$("#enter").autocomplete({
    source: parole,
    minLength: 3
});
 

la lista con i suggerimenti comparirà solo a partire dal terzo carattere che inseriremo.

Per fare un altro esempio, potremo vedere come intercettare direttamente la scelta fatta dall’utente. Il metodo autocomplete ci mette a disposizione il gestore dell’evento select con il quale indichiamo tramite una funzione cosa vogliamo fare quando appunto viene selezionato un elemento.
Facciamo dunque in modo che venga aperta una finestra che ci dica che elemento abbiamo scelto, procedendo semplicemente in questo modo:

$("#enter").autocomplete({
    source: parole,
    select: function(event,ui){
        alert("Hai scelto "+ui.item.value);
        }
    });
 

Conclusione

Bisogna dire che nella pratica sarà piuttosto raro trovare una situazione del genere e cioè con un array già predefinito.
Più comunemente la situazione potrebbe essere una lista contenuta in un database con l’autocompletamento che avviene tramite una chiamata ajax che restituisce la lista dei suggerimenti.
Questo è quello che vedremo nel prossimo articolo.
Se credi che la cosa si complicherà all’inverosimile ti sbagli. Ti posso anticipare che basterà inserire come source un nome di file:

 source: “file.php”
 

A questo punto jQuery provvederà automaticamente, ad ogni rilascio di tasto, ad inviare il contenuto del campo tramite una chiamata asincrona a file.php, il quale restituirà il risultato che verrà inviato alla nostra pagina.
Quello che vedremo nel dettaglio è come dovrà essere sviluppato il codice php, in quanto jQuery si aspetta il risultato in un formato preciso ed utilizza dei parametri standard sia per inviare che per ricevere i dati.

Tag: ,

L'autore

Maurizio è sposato con la triade PHP - MySql - Apache e, non pago, ha un'amante chiamata jQuery. Ha un blog dove cerca di descrivere nei minimi particolari sia la moglie che l'amante. La sua vera specialità è la realizzazione di gestionali complessi anche se non rifiuta mai un sito web. +

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

28 commenti

Trackback e pingback

  1. Tweets that mention L’autocompletamento di una campo, una nuova ui di jQuery (1/2) | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by Antonino Scarfì and mtx_maurizio, Simone D'Amico. Simone D'Amico said: L’autocompletamento di una…
  2. I migliori post della settimana #91 | Web Developer / Web Designer / SEO Specialist / Napoli :: EmaWebDesign
    [...] 04) L’autocompletamento di un campo, una nuova ui di jQuery (1/2) [...]
  3. L’autocompletamento di un campo, una nuova ui di jQuery (2/2) | Your Inspiration Web
    [...] precedente articolo abbiamo visto il principio di come implementare la funzione di autocompletamento messa a [...]