Oggi, il linguaggio Javascript ha nativamente raggiunto picchi elevatissimi, prima riproducibili solo attraverso framework. Recentemente abbiamo potuto osservare l'avvento di nuovi framework di seconda generazione, come Vue.js, Angular e React.js, molte persone si stanno interrogando sull'utilità di un framework come jQuery. Tuttavia, anche se quest'ultimo appartiene alla precedente generazione di sviluppo, sta correntemente venendo utilizzato in maniera decisamente non trascurabile in tutto il mondo. Questo successo è dovuto al fatto che jQuery possiede controlli avanzati ma allo stesso tempo semplicissimi da utilizzare, che permettono anche allo sviluppatore alle prime di armi di realizzare funzionalità che necessiterebbero di una conoscenza di JavaScript sicuramente molto più avanzata, se parliamo di codice nativo.
In particolar modo, l'estensione jQuery UI ci ha fornito e fornisce tutt'ora un kit di strumenti e plug-in molto interessanti per la realizzazione di svariati controlli per l'interfaccia utente, mantenendo inalterata la capacità di jQuery che consente allo sviluppatore di "ottenere di più scrivendo meno".
In questo articolo vedremo come utilizzare l'Autocomplete, un modulo di jQuery UI che ci consente di potenziare l'esperienza dell'utente quando ricerca un termine utilizzando un campo di input.
L'importanza dell'autocompletamento
Se pensiamo alla barra di input di Google, ci rendiamo facilmente conto di come essa non offrirebbe la stessa potenza senza la sua ottima funzionalità di autocompletamento. Digitando un testo, l'utente può ricevere suggerimenti riguardo alla sua ricerca.
Grazie al widget Autocomplete di jQuery UI possiamo realizzare un controllo simile, restringendo il parco di opzioni a valori predefiniti dallo script. Questa funzionalità permette all'utente di migliorare la sua esperienza di navigazione: a quest'ultimo basterà digitare una lettera o una piccola porzione di testo per visualizzare tutte le opzioni selezionabili annesse, anche organizzate secondo criteri scelti dallo sviluppatore.
Per far funzionare il plug-in, dobbiamo ovviamente inserire prima jQuery e poi jQuery UI all'interno della nostra pagina web. Nella pagina di download della suddetta estensione possiamo selezionare solo i moduli di cui realmente necessitiamo nei nostri progetti, dunque possiamo produrre un pacchetto UI personalizzato sulle nostre esigenze, oppure possiamo implementare tutto il framework completo tramite il servizio CDN:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
</body>
</html>Abbiamo inoltre incluso il file CSS ufficiale di jQuery UI che ci permette di fornire uno stile ottimale ai relativi elementi HTML. Al momento della scrittura di questo tutorial, stiamo utilizzando la versione 1.12.1. A questo punto siamo pronti per partire.
Funzionalità di Autocomplete
Come tutti i componenti di jQuery UI, anche Autocomplete è semplice ed immediato. Dobbiamo creare un semplice layout HTML, a cui nel nostro caso vengono fornite le classi CSS ufficiali (come ui-widget), composto da un div contenitore, da una label e da un input con id "tags":
<div class="ui-widget">
<label for="tags">Squadre italiane: </label>
<input id="tags">
</div>A questo punto, tramite JavaScript, definiamo un array di voci di selezione che appariranno quando l'utente digiterà qualcosa nell'input, nel caso in cui ci sarà una corrispondenza nel testo. Ad esempio, possiamo usare una lista di squadre calcistiche italiane:
<script>
var italianTeams = [
"Juventus", "Inter", "Milan", "Napoli", "Roma", "Lazio", "Sampdoria", "Fiorentina"
];
</script>Creiamo quindi il controllo tramite il metodo autocomplete, fornendogli in ingresso un letterale oggetto la cui proprietà source sia impostata sull'array appena creato:
$( "#tags" ).autocomplete({
source: italianTeams
});L'uultimo step prevede l'inclusione di tutto ciò nel gestore degli eventi ready, per lanciare l'applicazione al caricamento completo del DOM:
$(function() {
var italianTeams = [
"Juventus", "Inter", "Milan", "Napoli", "Roma", "Lazio", "Sampdoria", "Fiorentina"
];
$( "#tags" ).autocomplete({
source: italianTeams
});
});Quando l'utente digiterà le iniziali o parte del testo relativa ad una squadra, questa verrà mostrata come voce selezionabile.
Categorie di voci selezionabili
Come possiamo vedere, settare una funzionalità di autocompletamento via jQuery UI è di base una procedura molto semplice.
Possiamo complicare leggermente la faccenda se vogliamo aggiungere il raggruppamento delle singole voci all'interno di categorie. Ad esempio, mantenendo attivo il nostro esempio precedente, possiamo dividere le squadre calcistiche italiane per zona: Nord, Centro e Sud.
Per fare questo dobbiamo estendere le funzionalità di base di jQuery UI e del widget autocomplete tramite la funzione $.widget, nel seguente modo:
$.widget( "custom.autocompleteCategory", $.ui.autocomplete, {
_create: function() {
this._super();
this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
},
_renderMenu: function( ul, items ) {
var that = this,
currentCategory = "";
$.each( items, function( index, item ) {
var li;
if ( item.category != currentCategory ) {
ul.append( "
" + item.category + "
" );
currentCategory = item.category;
}
li = that._renderItemData( ul, item );
if ( item.category ) {
li.attr( "aria-label", item.category + " : " + item.label );
}
});
}
});Il nome custom.autocompleteCategory sarà il metodo che andremo ora ad utilizzare nel codice principale. Il metodo renderMenu ci permette, tramite dei semplici controlli DOM di jQuery, di includere gli elementi di categoria, che stilizzeremo successivamente con un apposito CSS. Al metodo renderMenu viene passata, come secondo parametro, la lista di voci che andremo ad utilizzare all'interno del nostro autocompletamento, quindi possiamo iterarla con $.each per accedere ad ogni singola voce. Vogliamo che questa sia ora un letterale oggetto avente proprietà label e category.
Gli elementi li che verranno creati ed inclusi nell'HTML prodotto avranno (per nostra scelta) classe ui-autocomplete-category:
.ui-autocomplete-category {
font-weight: bold;
padding: .2em .4em;
margin: .8em 0 .2em;
line-height: 1.5;
color: red;
}A questo punto possiamo modificare la lista di voci precedenti, andando ad utilizzare dei letterali oggetto al posto delle semplici stringhe, che avranno come proprietà label il valore finale della voce e come proprietà category la categoria di appartenenza:
var italianTeams = [
{ label: "Juventus", category: "North" },
{ label: "Inter", category: "North" },
{ label: "Milan", category: "North" },
{ label: "Roma", category: "Center" },
{ label: "Lazio", category: "Center" },
{ label: "Napoli", category: "South" },
{ label: "Palermo", category: "South" }
];Lo step finale consiste quindi nel richiamare il controllo mantenendo inalterato l'HTML precedente:
$( "#tags" ).autocompleteCategory({
source: italianTeams
});Avremo così ottenuto un autocompletamento di voci selezionabili suddivise per categorie. Queste ultime compariranno più grandi e di colore rosso. Ecco il codice completo:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>jQuery UI autocomplete</title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
.ui-autocomplete-category {
font-weight: bold;
padding: .2em .4em;
margin: .8em 0 .2em;
line-height: 1.5;
color: red;
}
</style>
<script>
$(function() {
$.widget( "custom.autocompleteCategory", $.ui.autocomplete, {
_create: function() {
this._super();
this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
},
_renderMenu: function( ul, items ) {
var that = this,
currentCategory = "";
$.each( items, function( index, item ) {
var li;
if ( item.category != currentCategory ) {
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
li = that._renderItemData( ul, item );
if ( item.category ) {
li.attr( "aria-label", item.category + " : " + item.label );
}
});
}
});
var italianTeams = [
{ label: "Juventus", category: "North" },
{ label: "Inter", category: "North" },
{ label: "Milan", category: "North" },
{ label: "Roma", category: "Center" },
{ label: "Lazio", category: "Center" },
{ label: "Napoli", category: "South" },
{ label: "Palermo", category: "South" }
];
$( "#tags" ).autocompleteCategory({
source: italianTeams
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Squadre: </label>
<input id="tags">
</div>
</body>
</html>Conclusioni
Come abbiamo potuto vedere, realizzare una procedura di autocompletamento applicata ad un campo di input è una task molto semplice da realizzare avvalendoci di jQuery UI.
Abbiamo inoltre la possibilità di personalizzare ed espandere le capacità di base tramite la funzione $.widget per produrre funzionalità più avanzate, come la suddivisione delle voci in categorie.
Ma non è finita qui: con un pò di esperienza nella programmazione Javascript e nelle API di jQuery, jQuery UI autocomplete permette di realizzare controlli anche per la generazione di dati via remoto, utilizzando ad esempio controlli Ajax che producono liste dinamiche in JSON. Possiamo produrre autocompletamenti multipli (molteplici campi selezionabili in un unico input), operazioni di caching e produzione di output e display aggiuntivo e personalizzato.
Per una approfondire ulteriormente jQuery UI, è disponibile su HTML.it una guida dedicata proprio a questa estensione di jQuery.
