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" "http://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" "http://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.
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
28 commenti
Trackback e pingback
-
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 ... -
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) [...] -
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 [...]
Bene non lo sapevo, stavo continuando ad utilizzare http://jquery.bassistance.de/autocomplete/demo/.
Molto meglio autocomplete. E poi é una ui quindi sottoposta al framewok css di jQuery
:-)
Questa volta sono stato più veloce, l’avevo già trovato e lo uso senza problemi ;-)
Anche il plugin originale di Zaefferer ha però i suoi pregi. Ad esempio il nuovo cerca le lettere digitate all’interno della parola… non rendendo possibile la ricerca solo per le parole “che iniziano con”. Dipende dai casi :-), a volte uso il vecchio a volte il nuovo.
Ciao Joel.
Non ho capito bene cosa non rende possibile.
In fondo analizza la stringa all’interno del campo.
Poi lato server, come vedremo nel prossimo articolo, dipenderà dalla query cosa andremo a cercare.
Ottimo articolo Maruzio, davvero utile questa UI. Volevo sapere una cosa (forse un po’ fuori tema). Se io dovessi integrare questa, o altre librerie jquery su joomla, tramite l’override pensi sia una cosa fattibile?
Esempio: ammettiamo che io abbia un plugin jquery che in tutte le immagini mi applica un calo di opacità al passaggio del mouse, come faccio a integrarlo in un template in modo tale che chiunque lo possa installare tranquillamente?
Grazie e complimenti ancora ;)
ops, ti ho chiamato per sbaglio Maruzio ahahahah sorry
Ciao Caluk, non so cosa intendi per implementazione di script JS “tramite overriding” (di cosa? di altri JS?) e neppure con “chiunque lo possa installare” (lo devi installare te o qualcun’altro?), comunque penso Joomla ti permetta di modificare il codice del template come fa WordPress direttamente via Web. A quel punto metti tutti i tuoi script in fondo prima del body (o nell’header se preferisci).
@chris: forse mi sono espresso in maniera criptica XD
Allora, io uso Joomla come CMS, e per i miei siti web creo un template apposito. Adesso vorrei iniziare a creare dei template free, o a pagamento, e vorrei sapere, se tramite l’override del template (ossia appunto la modifica dei codici dei widget, dei moduli, del template etc) posso integrare tranquillamente jQuery.
Intregrandolo nel template, l’utente può tranquillamente scaricarlo e installarlo come un comunissimo tema, senza smanettare per inserire lo scrpt e robe varie.
Sono sicuro che si può fare, però chiedo all’esperto per sapere se ci sono cose a cui devo stare attento o altro.
Purtroppo per adesso mi sono limitato a creare template semplici, e poi aggiungere in un secondo tempo qualche script. Imparare, tramite l’override, a integrare jQuery sarebbe una bellissima cosa.
Potere si può.
Ma non l’ho mai fatto, dovrei vedere come funziona.
ok grazie :) adesso appena trovo un po’ di tempo ci sbatto su. Penso che però la prima cosa da fare sia disabilitare mootools per il frontend, altrimenti integrando le due librerie java il sito sarà veloce come una tartaruga ahah
@Caluk ciao, se non ho capito male vorresti includere jQuery in un tuo template Joomla!, giusto?
Beh dovrebbe essere possibile, esistono alcuni metodi molto utili di JDocument [1] per includere CSS/Javascript, più precisamente addScript() ed addScriptDeclaration() (per i fogli di stile dovrai usare addStyleSheet() ed addStyleDeclaration()).
Quindi in pratica nell’index.php del tuo template, prendi un istanza di JDocument e usi questi metodi per includere i file di jQuery:
$document =& JFactory::getDocument();
// … devi farlo per ogni file JS da includere
$document->addScript(“jquery/ui/jquery.ui.autocomplete.js”);
// Includi il file CSS
$document->addStyleSheet(“jquery/themes/base/jquery.ui.all.css”);
Tutto qui, solo occhio ai percorsi…Spero di esserti stato utile ;)
[1]: http://docs.joomla.org/API15:JDocument
Stra-interesting, non vedo l’ora di leggere la digressione su php, speriamo non si faccia attendere! Grazie Maurizio!
Massimo massimo due settimane :-)
Bene Maurizio aspetto con ansia la seconda puntata perché io mi sono fatto uan serie di funzioni per l’autocopmpletamento
Bravissimo Maurizio!
Come sempre i tuoi post arrivano poco dopo che mi viene in mente di creare quello che alla fine posti!Mi sono veramente utilissimi.
Volevo chiederti una cosa che forse esula leggermente l’articolo:
Ho notato che l’auto completamento di BigG è un po’ diverso da quello dell’ui di jquery, è veramente notevole il fatto che se scrivo, il primo risultato viene auto-inserito nella stringa di ricerca con colore differente in modo che se voglio quello basta che premo la freccia avanti, sennò posso continuare a scrivere….
Si potrebbe integrare una cosa del genere in questo plugin?
Ciao
Non conosco bigG comunque mi pare di aver capito cosa intendi.
L’autocompletamento di jQuery non dispone nativamente di questa funzionalità.
ma puoi creare una piccola estensione, così a occhio non sembra difficile
Ehehe!bigG è inteso come Google!
Ho capito, volevo implementare anche il fatto di mettere in grassetto le parole che avevo scritto dentro le parole trovate…a questo punto mi metto a lavoro su questa piccola estensione.
Anche se a dir la verità non saprei come fare per estendere una funzionalità di jquery ui….forse è solo la parola “estensione” che mi ha messo in crisi..!
Grazie comunque
Guarda, io non conosco il lessico di voi giovani come pure tutte le vostre diavolerie; non so nemmeno usare word :-)
Buona idea per un articolo futuro.
Ottimo post! Non avevo mai sentito parlare di Jquery (neofitissimo), ma hai spiegato tutto alla perfezione! Ora mi abbuffo degli altri tuoi post… Grazie!
Ciao Matteo e grazie.
Quella presentata in questo articolo é una user interface di jQuery, ovvero un plugin (un’estensione del framework) realizzato e mantenuto dal team di jQuery.
Se sei interessato, ti consiglio di di iniziare a mettere le mani nel framework vero e proprio
Ciao Maurizio e complimenti per questa guida: ci voleva proprio (come suggerivo anche nel forum:-) ).
Riguardo alla seconda parte che andrai a scrivere (che è quella che interessa a me)
vorrei porti in anticipo alcune domande:
1) avendo un database con migliaia e migliaia di risultati, questo comporterà lentezza nel far apparire la lista della possibili parole (mettendo una lunghezza minima di 3)? Tenendo conto che si dovrà fare una semplice funzione che seleziona i dati dal DB;
2) prevedi di trattare anche il lato sicurezza? Perchè, immaginando l’utilizzo di questo autocomplete in un form di registrazione per esempio, potrebbe accadere che qualche malintenzionato aggiunga una paarola che non esiste all’interno del DB.
Spero di essermi spiegato.
Alla prossima puntata allora!
1) Beh, difficile rispodere precisamente. In generale, non mi preoccuperei della lentezza. in fondo se si vincola l’inizialiozzazione a 3-4 caratteri, il risultato é già relativamente limitato.
Dal punto di vista del db non é così oneroso; una query di select, anche su qualche migliaio di campi, non dovrebbe impiegare più di mezzo secondo. L’invio di dati in ajax, anche su una lista piuttosoto lunga, non é così pesante.
Comunque va valutato caso per caso e dipende anche dal server.
2) Innanzi tutto non vedo come possa essere utile autocomplete in un form di registrazione; di solito lo si usa in un form di ricerca. Comunque. Per il discorso della sicurezza, non so cosa intendi. Verrà fatto l’escape della stringa inviata, più di quello non saprei;
In ogni caso, quando uscirà l’articolo, vedremo di risolvere tutte le perplessità
Ciao a tutti,
non ho capito bene da dove scaricare i file da includere…sapreste spiegarmelo per favore? Grazie :)
Da sito di jQuery
http://www.jquery.com
Salve,
mi complimento per il lavoro svolto,l’autocompletamento funziona molto bene
Volevo chiederle se è possibile fare una modifica.Una volta selezionata la voce che mi appare dall’autocompletamento avrei bisogno di far diventare quel campo readonly,in modo tale da non poterci piu scrivere.
Ho visto che attualmente è previsto un alert che stampa la selezione effettuata.
Potrebbe dirmi come posso modificare il codice in modo tale da settare a readonly il campo autocompletato?
Grazie mille,
Alberto