Completamento automatico con jQuery UI

Ci sono molti plugin su Internet che ci consentono di aggiungere questa funzionalità al nostro sito, tuttavia sono sviluppati secondo uno schema di programmazione di cui potremmo non essere a conoscenza e quindi la loro modifica e implementazione è di solito un po' noiosa e complicata. Ma non tutto è perduto da allora jQuery e la sua estensione delle biblioteche jQuery UI ci offrono alcuni metodi per implementare la funzionalità di completamento automatico sul nostro sito senza troppi grattacapi.
Prima di passare a un esempio, vediamo il metodo di completamento automatico e come funziona.
Il metodo di completamento automatico()
Il metodo completamento automatico può essere utilizzato in due modi:

$ (selettore, contesto) .autocomplete (opzioni) $ (selettore, contesto) .autocomplete ("azione", parametri)

Questo metodo dichiara che un HTML deve essere gestito come un campo che visualizza un elenco di suggerimenti, le opzioni specificano il comportamento di questo elenco nel momento in cui l'utente inizia a digitare nel campo.
Dei caratteri inseriti nel campo di testo viene effettuato un confronto con i valori contenuti nelle opzioni sorgente.
Vediamo un esempio pratico per vederlo meglio:
1- Per prima cosa includiamo i file necessari:

2- Creiamo una variabile che contiene le parole che saranno l'elenco dei suggerimenti disponibili per il completamento automatico, l'elenco dei suggerimenti può essere alimentato anche da un JSON e anche da a XML, anche estendendo un po' la funzionalità aggiungendo ajax, ma in questo esempio useremo una variabile per non complicare le cose:

var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy "," Haskell "," Java "," Javascript "," Lisp "," Perl "," PHP "," Python "," Ruby "," Scala "," Scheme "];

3- Invochiamo il metodo, gli associamo il selettore e gli diamo il parametro come opzione fonte Indicando dove ottenere l'elenco dei suggerimenti da:

 $ ("#tags") .autocomplete ({source: availableTags}); 

4- Per finire nel nostro HTML creiamo ache conterrà il nostro input che sarà colui che implementerà il completamento automatico:

tag:

Dopo l'implementazione dovrebbe essere qualcosa del genere:

Infine, ti lascio il codice completo in modo che tu possa testarlo tu stesso, senza dimenticare che possiamo riempire il nostro elenco di suggerimenti da varie fonti valide e applicando diverse opzioni ed eventi che aumenteranno la funzionalità del nostro componente.

 Completamento automatico dell'interfaccia utente jQuery - Funzionalità predefinitatag:

Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo