Una rapida ricerca su Google produrrà un sacco di pratici plugin di autocompletamento - c'è persino un'opzione condivisa dall'interfaccia utente di jQuery che viene fornita in bundle con la libreria. Tuttavia oggi voglio esaminare una soluzione alternativa. Il plugin di completamento automatico jQuery rilasciato da DevBridge ha l'esatta funzionalità che trovo più attraente.
Gli stili evidenzieranno automaticamente le parole durante la digitazione e i risultati verranno visualizzati nel menu a discesa in basso. Questo tutorial è una breve introduzione all'uso del plugin caricando il contenuto da un array JavaScript. È possibile caricare il contenuto Ajax da un file di back-end o dal contenuto fuori dal database, tuttavia per questo tutorial è più semplice lavorare con i dati locali. Guarda la mia demo di esempio per avere un'idea di cosa stiamo cercando di costruire.
Demo dal vivo - Scarica il codice sorgente
Creazione della pagina
Un buon primo passo è scaricare una copia del plugin di completamento automatico jQuery. Sto usando la versione minified nella mia intestazione, insieme a una copia dell'ultimo script jQuery. Dal momento che sto mantenendo tutti i suggerimenti all'interno di un array JavaScript, ho anche spostato gli script personalizzati in un altro file separato.
Le risorse non sono troppo difficili da configurare. Analogamente, tutto l'HTML è molto semplice, quindi puoi implementare qualsiasi tipo di design di ricerca nella tua pagina e dovrebbe funzionare correttamente. Sto usando un contenitore esterno con l'ID #searchfield centrare l'intera forma. Non esiste un pulsante di invio per questa dimostrazione, tuttavia i risultati verranno visualizzati automaticamente nel campo del contesto dinamico sotto l'input.
Possiamo indirizzare il campo usando un ID di #autocomplete. Non c'è HTML in più perché tutti i suggerimenti saranno presentati usando i codici JS. Un'altra area interessante è il paragrafo che utilizza un ID di #outputcontent. Qui è dove possiamo visualizzare la scelta dell'utente una volta che fanno clic su un suggerimento. Normalmente su un sito web in diretta si dovrebbe semplicemente reindirizzare l'utente a una pagina di ricerca o sulla stessa pagina principale.
Progettare con i CSS
Non voglio dilungarmi troppo nei dettagli, ma dovremmo esaminare gli stili CSS per ciascuna delle funzionalità di suggerimento, insieme all'area di input principale. Il bordo esterno e gli stili di contenuto sono fortemente sviluppati attorno alla barra di ricerca di Design Shack. Ciascuno degli stili di suggerimento è basato sul codice predefinito, che ho copiato nel mio foglio di stile.
Se vuoi mantenerli in un foglio di stile separato, caricarebbe comunque bene. Tuttavia, provo a combinare le risorse in modo da poter ridurre le richieste HTTP dal browser. Le prime due classi hanno come target l'intero popup di suggerimenti, insieme a ciascuna riga di suggerimenti interna. Puoi modellarli in qualsiasi modo adatto al tuo sito web. Inoltre, il CSS viene fornito con una feature class selezionata per evidenziare il testo che è già stato digitato dall'utente.
Il campo di ricerca non dovrebbe essere un problema indipendentemente dal tuo progetto. jQuery Autocomplete è progettato per aggirare qualsiasi larghezza in modo che tutti i suggerimenti possano adattarsi perfettamente allo stesso layout. Dato che il mio esempio occupa molto spazio sulla pagina, il plugin lo gestisce in modo impeccabile senza troppe personalizzazioni.
Implementa il completamento automatico
Se si utilizza una chiamata Ajax di backend per recuperare i risultati dei dati, potrebbe essere necessario eseguire la propria funzione di ricerca. jQuery Autocomplete si aspetta un certo tipo di dati di risposta come XML / JSON e questo dovrebbe essere restituito da PHP, Rails, Python, ASP.NET, ecc. Quindi lo scenario più probabile è quello di cercare nella tabella di database delle voci ed estrarre tutti i relativi post e i relativi URL, quindi restituire questo elenco al browser.
Quello che ho fatto è stato creare una serie di voci direttamente all'interno di JavaScript per le principali valute presenti in tutto il mondo. Quando inizi a digitare il nome del paese o della valuta, verrà visualizzato un elenco di elementi suggeriti estratti direttamente dall'array. Ci vuole molto tempo per l'inserimento manuale dei dati, quindi copierò solo una piccola parte dell'array per dimostrare come è fatto.
Tutto questo contenuto deve essere aggiunto prima di eseguire la propria funzione all'interno di jQuery. Ho scelto di mantenere l'array e la chiamata della funzione personalizzata memorizzati nello stesso file JS. Tuttavia è possibile scegliere di separare le funzioni dai dati e spostarli completamente in file diversi. Ora il plugin di completamento automatico richiede solo una piccola quantità di codice predefinito.Copierò un modello di esempio insieme al mio codice demo dal vivo in modo che tu possa vedere cosa ho fatto usando gli stessi parametri.
Il consultare parametro viene utilizzato solo per i dati locali quando stiamo mirando a un array. onSelect attiverà una nuova funzione ogni volta che l'utente seleziona un suggerimento. Nella mia demo live creiamo semplicemente una nuova stringa di HTML per produrre il nome e il valore selezionati di quella voce. Ma per favore nota che la mia demo è un esempio molto semplice di ciò che è possibile.
Controlla la documentazione di jQuery Autocomplete per avere un'idea migliore di alcuni altri parametri. Non ho neanche iniziato a scalfire la superficie e gli sviluppatori di JavaScript possono probabilmente mettere insieme degli esempi usando molti altri parametri nella chiamata alla funzione. Ma voglio mostrare quanto sia facile ottenere questo plugin attivo e funzionante sul tuo sito Web - anche utilizzando i dati statici dove necessario.
Demo dal vivo - Scarica il codice sorgente
Pensieri finali
Se non hai mai trastullato usando i suggerimenti di autocomplete, allora devo raccomandare questo plugin. Ho usato alcune soluzioni diverse in passato, ma finora nulla mi ha davvero colpito. E c'è una grande differenza tra il caricamento dei suggerimenti con i risultati della pagina con i risultati di ricerca (come Google Instant).
Prima di utilizzare questo plugin, assicurati di avere un buon piano per costruire un'interfaccia utente che funzioni bene. Il plugin di completamento automatico jQuery insieme a tutti i miei codici sorgente sono rilasciati gratuitamente con la licenza MIT, quindi sei aperto a utilizzarlo per qualsiasi progetto!