Corsi on-line

Autocompletamento con jQuery

Voglio segnalarvi un plugin per jQuery che recentemente mi è tornato molto utile. Il nome di questo plugin è JQ Autocomplete e consente di implementare una interessante funzionalità Ajax di autocompletamento ai campi di testo dei nostri moduli. Ecco uno screenshoot di esempio:

Implementare questo script è molto semplice. Scaricate il pacchetto dal sito dell’autore e poi aprite il sorgente della vostra pagina HTML che contiene il Form. Aggiungete i riferimenti a jQuery, al plugin ed il foglio di stile contenuto nello Zip:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />

Assegnamo un ID univoco al campo input su cui applicare l’effetto:

<input type="text" name="q" id="query" />

Creiamo un’istanza dell’oggetto:

var options, a;
jQuery(function(){
  options = { serviceUrl:'pagina-lato-server.php' };
  a = $('#query').autocomplete(options);
});

Nel nostro esempio il lavoro di individurae i suggerimenti per l’autocompletamento è svolto da uno script in PHP (il cui output viene utilizzato tramite Ajax). Ovviamente potete usare il linguaggio che preferite, l’importante è che l’applicazione (interrogata con metodo GET con la querystring ?query=Mu) restituisca i risultati in questo modo (JSON):

{
 query:'Mu',
 suggestions:['Musica','Muschio','Muscoli','Mucca']
}

dove query è la richerca paziale, e suggestions sono i termini suggeriti.

Ovviamente il plugin dispone anche di nuomerose funzionalità aggiuntive per le quali vi invito a leggere la documentazione sul sito ufficiale.

Post correlati
I più letti del mese
Tematiche