By Poter visualizzare in real time gli eventuali risultati di ricerca, nel momento in cui si ha un campo di input libero, è cosa estremamente utile: a tal proposito, la ricerca della parola all’interno di un sito internet è un fulgido esempio di quanto appena evidenziato. Per centrare appieno quest’obiettivo, è possibile ricorrere alla funzione Jquery autocomplete.
Che cos’è la funzione Jquery autocomplete?
Di cosa si tratta? Sostanzialmente di un auto-completamento che viene realizzato mediante javascript ed html, mediante ad una lista di parole chiave che è il diretto interessato a selezionare. A tal proposito, è cosa estremamente utile sapere già a priori quali sono i vari elementi che dovranno essere scelti nel momento in cui si andrà a compilare l’input text.
Come funziona Jquery autocomplete?
Semplicemente facendo apparire all’interno di un elenco del tutto simile ad un menù a tendina i risultati di ricerca. Questi ultimi tenderanno a cambiare nel momento in cui il diretto interessato aggiungerà le varie lettere. Per il corretto funzionamento del plug-in, pertanto, è opportuno inserire in primo luogo jQuery ed in seguito jQuery UI nella pagina web di riferimento.
Affinché funzioni in maniera corretta, il codice necessita di tre file da includere in maniera obbligatoria.
1. jquery.js: il cui scopo primario consiste nel richiamare al volo le varie librerie base di JQuery;
2. jquery-ui.min.js: vengono incluse tutte le varie funzionalità, necessarie ai fini dell’auto-completamento;
3. – jquery-ui.css: fondamentale ai fini della formattazione del menu a tendina che viene mostrato, nel momento in cui si trovano i risultati di interesse e pertinenti alle ricerche dell’utente. Il tutto, come già sottolineato precedentemente, rigorosamente in real time.
Il file index.html, pertanto, è quello che contiene al suo interno il codice di baso. Il campo di input, pertanto, deve necessariamente poter contare su un identificatore. Quest’ultimo, noto appunto come auto-complete, ha come scopo primario quello di consentire alla funzione in jQuery di agire senza particolari intoppi.
Ma è nella funzione source, quella in cui si racchiude l’avvio di qualunque tipo di auto-completamento.
Source infatti racchiude all’interno dell’array la lista delle parole entro cui avverrà la ricerca; quando l’utente comincerà a digitare la prima lettera, che deve essere presente in come minimo una delle parole nell’array, apparirà il menù a tendina di riferimento. Quest’ultimo mostrerà in maniera esauriente la lista completa delle parole a disposizione e, di conseguenza, l’elenco definitivo di tutti i risultati possibili.
Ricerca dei termini fra i dati di un database
Se si fosse intenzionati a portare a termine una ricerca fra i dati estratti dalla tabella di un database, tutto quello che l’utente dovrà fare consisterà nel modificare il codice. L’unica parte da modificare è solamente la lista dei termini presenti nell’array.
Pertanto, per centrare appieno lo scopo, lo script conterrà ben tre file:
1. index.php: contenente il codice effettivo;
2. config.inc.php: presenta i parametri di connessione al database, pronto per essere modificato nella maniera appropriata;
3. dump.sql: il dump che bisognerà poi importare all’interno del database dell’utente.
Conclusioni
Come si può facilmente intuire, l’utilità della funzione Jquery autocomplete è abbastanza evidente. Basti pensare, tanto per citare un esempio, al ruolo strategico che riveste la barra di input di Google. Ci si rende facilmente conto di quanto sia utile e che non sarebbe lo stesso, se non disponesse della funzionalità di auto-completamento. Basta pertanto digitare un testo e l’utente potrà visualizzare i suggerimenti inerenti alla sua interrogazione di ricerca che, di fatto, risulterà ancora più affinata.
Sotto certi aspetti, il widget Autocomplete di jQuery UI non si discosta più di tanto dalla barra di input del motore di ricerca del Colosso di Mountain View. Il motivo di base è che consente di agire grosso modo allo stesso modo, riducendo in maniera considerevole il parco di alternative a valori predefiniti dallo script. Di fatto, l’utente vede migliorare in modo significativo la sua esperienza di navigazione online, per il semplice motivo che a partire dalla digitazione di lettere, poi di sillabe e via via di elementi testuali, ha l’importante opportunità di visualizzare le relative opzioni che possono essere selezionate. Ad organizzare le opzioni, chiaramente, ci pensa lo sviluppatore, sulla base di criteri definiti a monte.
