Come utilizzare il widget di completamento automatico dell'interfaccia utente jQuery

Dovremo anche collegarci ai file che abbiamo decompresso dall'archivio UI di jQuery, nonché un foglio di stile personalizzato; i seguenti file dovrebbero andare nel della pagina:

I seguenti file dovrebbero andare alla fine del :

Passaggio 3 Disegnare il modulo

In questo esempio usiamo un tema molto semplice e neutro, la maggior parte dei quali è puramente un esempio. Sono richiesti pochissimi stili e la maggior parte può essere modificata se necessario. Il seguente CSS è usato nel autocomplete.css foglio di stile (tutto lo stile dell'interfaccia utente di jQuery è nel jquery-ui-1.8.custom.css foglio di stile):

#formWrap padding: 10px; position: absolute; float: sinistra; background-color: # 000; sfondo: RGBA (0,0,0, 0,5); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;  #messageForm width: 326px; border: 1px solid # 666; background-color: #eee;  #messageForm fieldset padding: 0; margin: 0; position: relative; border: none; background-color: #eee;  #messageForm legend visibility: hidden; altezza: 0;  #messageForm span display: block; larghezza: 326px; imbottitura: 10px 0; margine: 0 0 20 px; text-indent: 20px; background-color: #bbb; border-bottom: 1px solid # 333; tipo di carattere: 18px Georgia, Serif; color: #fff;  #friends width: 274px; imbottitura: 3px 3px 0; margine: 0 auto; border: 1px solid #aaa; background-color: #fff; cursore: testo;  #messageForm #to width: 30px; margine: 0 0 2px 0; padding: 0 0 3px; position: relative; top: 0; float: sinistra; border: none;  #messageForm input, #messageForm textarea display: block; larghezza: 274px; padding: 3px; margine: 0 auto 20px; border: 1px solid #aaa;  #messageForm label display: block; margine: 20px 0 3px; text-indent: 22px; font: grassetto 11px Verdana, Sans-serif; color: # 666;  #messageForm #toLabel margin-top: 0;  Pulsante #messageForm float: right; margine: 0 0 20 px 0;  #messageForm #cancel margin-right: 20px;  #friends span display: block; margine: 0 3px 3px 0; imbottitura: 3px 20px 4px 8px; position: relative; float: sinistra; background-color: #eee; border: 1px solid # 333; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; color: # 333; font: normale 11px Verdana, Sans-serif;  #friends span a position: absolute; destra: 8px; top: 2px; color: # 666; carattere: grassetto 12px Verdana, Sans-serif; text-decoration: none;  #friends span a: hover color: # ff0000;  .ui-menu .ui-menu-item white-space: nowrap; riempimento: 0 10px 0 0; 

Per dare alla forma un bel bordo trasparente con angoli arrotondati usiamo il CSS3 RGBA regola e il -moz-border-radius, -webkit-border-radius e border-radius regole; i browser più popolari ora supportano queste regole, tra cui Firefox, Safari, Chrome e Opera. IE non supporta nessuno di essi e, sebbene possa utilizzare un filtro per implementare l'opacità rudimentale, gli angoli arrotondati dovrebbero essere supportati attraverso l'uso delle immagini. L'efficacia del RGBA la trasparenza non è mostrata al suo massimo in questo esempio; ma questo tipo di modulo verrebbe probabilmente utilizzato come overlay modale mobile in un'implementazione completa, che si posizionerebbe sopra il contenuto effettivo della pagina.

Il container

attorno a campo a cui il campo di testo di completamento automatico verrà assegnato ha lo stesso posizionamento e lo stesso stile di elementi, ma il all'interno di questo contenitore viene rimosso il bordo in modo che sia nascosto. Riduciamo anche la sua larghezza e la spostiamo a sinistra. Questo è così quando aggiungiamo i destinatari formattati al

il non traboccherà e aumenterà l'altezza del

inutilmente.

Modelliamo anche i destinatari, che verranno aggiunti al

come elementi contenenti un link. Principalmente questi sono in stile per abbinare il tema di base e sono anche gli angoli arrotondati. È importante che questi elementi siano resi a livello di blocco e anche fluttuanti in modo che si impilano correttamente. Abbiamo anche bisogno di sostituire alcuni degli stili Automcomplete forniti dal tema dell'interfaccia utente jQuery che stiamo utilizzando; l'ultimo selettore semplicemente impedisce ai singoli suggerimenti nel menu di spezzare le parole, cosa che accade perché abbiamo fatto il è associato a così piccolo.

A questo punto, il modulo dovrebbe apparire in questo modo:

---

Passaggio 4 Collegamento del completamento automatico

Quindi dobbiamo allegare il widget di completamento automatico al all'interno del

; per fare questo possiamo usare il seguente script:

Il widget è collegato al usando il completamento automatico () metodo. Forniamo un oggetto letterale come argomento al metodo, che configura il fonte opzione e il selezionare e modificare callback di eventi.

Il fonte opzione viene utilizzata per dire al widget dove ottenere i suggerimenti per il menu di completamento automatico da. Usiamo una funzione come valore di questa opzione, che accetta due argomenti; il primo è il termine inserito nel , il secondo è una funzione di callback che viene utilizzata per passare i suggerimenti al widget.

All'interno di questa funzione usiamo jQuery getJSON () metodo per passare il termine a un file PHP lato server. Il file PHP userà il termine per estrarre i nomi dei contatti corrispondenti da un database MySql. Utilizziamo un callback JSONP per elaborare i dati restituiti dal server; la funzione di callback che viene passata come il secondo argomento dell'opzione source si aspetta di ricevere i dati in un array, quindi per prima cosa creiamo un array vuoto e quindi usiamo jQuery ogni() metodo per elaborare ogni elemento nell'array JSON restituito dal server. Semplicemente iteriamo su ogni elemento di questo array e aggiungiamo ogni suggerimento al nostro nuovo array. Una volta che il nostro nuovo array è stato creato, lo passiamo alla funzione di callback per il widget da visualizzare nel menu.

Quindi definiamo un gestore per l'abitudine del completamento automatico selezionare evento; questa funzione verrà eseguita dal widget ogni volta che viene selezionato un suggerimento dal menu di completamento automatico. Questa funzione passa automaticamente due argomenti: l'oggetto evento e a ui oggetto contenente il suggerimento che è stato selezionato. Usiamo questa funzione per formattare il nome del destinatario e aggiungerlo al

. Creiamo semplicemente a elemento per contenere il testo e un elemento di ancoraggio che può essere utilizzato per rimuovere il destinatario. Una volta creato il destinatario formattato, lo inseriamo direttamente prima del camuffamento .

Infine aggiungiamo un gestore per il modificare evento; questa funzione sarà invocata ogni volta che il valore di che l'Autocomplete è associato alle modifiche. Lo usiamo solo per rimuovere il valore dal perché abbiamo già aggiunto la versione formattata al nostro contenitore

. Il carato appare un po 'in alto quando un nome di contatto formattato è stato aggiunto al

quindi usiamo anche questo gestore di eventi per correggere questo.

Questa è tutta la configurazione di cui abbiamo bisogno per questa particolare implementazione, ma ci sono ancora un paio di funzioni aggiuntive che dobbiamo aggiungere per mettere un po 'in ordine le cose. Dopo il completamento automatico () metodo aggiungi il seguente codice:

// aggiungi click handler agli amici div $ ("# friends"). click (function () // focus 'a' campo $ ("# a"). focus ();); // aggiungi gestore live per i clic su remove links $ (". remove", document.getElementById ("friends")). live ("click", function () // rimuovi l'attuale amico $ (this) .parent () .remove (); // corregge la posizione del campo 'a' se ($ ("# span di amici"). length === 0) $ ("# a"). css ("top", 0); );

Il che il nostro completamento automatico è collegato è parzialmente nascosto e il suo contenitore

è disegnato in modo che appaia come gli altri campi sul modulo; per completare l'inganno, aggiungiamo un gestore di clic al contenitore

in modo che facendo clic ovunque all'interno si concentra il reale . Visivamente e funzionalmente ora il

dovrebbe essere indistinguibile da un campo regolare.

Dobbiamo anche gestire i clic sull'ancora che viene aggiunto a ciascun destinatario formattato; usiamo jQuery vivere() metodo perché questi elementi possono o non possono esistere sulla pagina in un dato momento ed è più facile che legare la funzione del gestore ogni volta che creiamo una di queste ancore. Ogni volta che viene cliccato uno di questi ancoraggi, tutto ciò che facciamo è navigare fino al genitore dell'ancora che è stato cliccato e quindi rimuoverlo dalla pagina. Ricordi quando abbiamo corretto la posizione del carato prima nella sceneggiatura? Abbiamo solo bisogno di verificare se tutti i destinatari sono stati rimossi e, in caso affermativo, ripristinare la sua posizione di default.

---

Passaggio 5 Codice e risorse aggiuntivi

Ho usato un database MySql che contiene una tabella che elenca ciascuno dei nomi dei destinatari e il seguente file PHP per accettare i dati inviati dal getJSON () metodo e richiamare i destinatari corrispondenti dal database:

 $ Row [ "nome"]);  // echo JSON alla pagina $ response = $ _GET ["callback"]. "(". json_encode ($ friends). ")"; echo $ risposta; mysql_close ($ server); ?>

Per eseguire i file di esempio scaricabili, è necessario un server Web di sviluppo con PHP installato e configurato, nonché MySql e il database e la tabella appropriati. Quando una lettera viene digitata nel campo "a", questa lettera viene passata al server e utilizzata per estrarre ogni nome che inizia con la lettera che è stata digitata. I nomi corrispondenti vengono quindi passati alla pagina come JSON e visualizzati nel menu dei suggerimenti:

Questo tutorial ha mostrato come replicare il modulo di invio dei messaggi di Facebook, in particolare il modo in cui gli amici vengono aggiunti al modulo di messaggistica come destinatari utilizzando un completamento automatico e come i nomi degli amici vengono formattati dopo essere stati aggiunti in modo che possano essere facilmente rimossi. Il nostro modulo di esempio in realtà non fa nulla, ma quello che dovremmo fare per inviare effettivamente il modulo sarebbe quello di passare il contenuto del modulo a un file sul lato server per l'invio usando AJAX, che potrebbe facilmente essere agganciato all'invio evento del pulsante di invio utilizzato nel modulo.

I destinatari avrebbero bisogno di avere un qualche tipo di significato per il sistema di back-end, e probabilmente verrebbero mappati agli indirizzi e-mail nel database. Dovremmo recuperare il contenuto testuale di ciascuno dei elementi prima di tornare al server, anche se questa sarebbe una questione abbastanza banale.

Il widget di completamento automatico dell'interfaccia utente jQuery semplifica la connessione a qualsiasi origine dati e contiene una ricca suite di gestori di eventi a cui è possibile fornire funzioni per reagire al testo immesso nel campo associato o a un suggerimento selezionato dal menu. Il widget è in stile utilizzando l'ampia struttura CSS di jQuery UI e può essere facilmente modificato in modo che corrisponda al tema del sito esistente. Tutto sommato, è un widget eccellente che è facile da usare e offre grandi funzionalità.

Codice

Come utilizzare gli ultimi aggiornamenti all'API del Marketplace

Come utilizzare la funzione jQuery per selezionare elementi

×