Cum se utilizează widget-ul Autocomplete UI jQuery

De asemenea, trebuie să conectăm fișierele pe care le-am despachetat din arhiva jQuery UI, precum și o foaie de stil personalizată; următoarele fișiere trebuie să intre în a paginii:

Următoarele fișiere trebuie să pară la sfârșitul secțiunii :

Pasul 3 Modelarea formularului

Folosim o temă foarte simplă, neutră în acest exemplu, cea mai mare parte fiind doar un exemplu. Sunt necesare foarte puține stiluri și majoritatea pot fi schimbate dacă este necesar. Următorul CSS este utilizat în autocomplete.css (toate stilul jQuery UI se află în jquery-ui-1.8.custom.css foaie de stil):

#formWrap padding: 10px; Poziția: absolută; plutește la stânga; background-color: # 000; fundal: RGBA (0,0,0, .5); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;  #messageForm width: 326px; frontieră: 1px solid # 666; culoare de fundal: #eee;  #messageFormă de câmp padding: 0; margin: 0; Poziția: relativă; frontieră: nici una; culoare de fundal: #eee;  #messageForm legendă visibility: hidden; înălțime: 0;  #messageFormă span afișare: bloc; lățime: 326px; padding: 10px 0; margine: 0 0 20px; text-liniuță: 20px; culoare de fundal: #bbb; frontieră-fund: 1px solid # 333; font: 18px Georgia, Serif; Culoare: #fff;  #friends width: 274px; padding: 3px 3px 0; marja: 0 auto; frontieră: 1px solid #aaa; culoare de fundal: #fff; cursor: text;  #messageForm #to width: 30px; marcă: 0 0 2px 0; umplutură: 0 0 3px; Poziția: relativă; top: 0; plutește la stânga; frontieră: nici una;  #messageFormă de intrare, #messageForm textarea display: block; lățime: 274px; padding: 3px; margine: 0 auto 20px; frontieră: 1px solid #aaa;  #messageFormă de etichetă display: block; margine: 20px 0 3px; text-liniuță: 22px; font: bold 11px Verdana, Sans-serif; culoare: # 666;  #messageForm # laLabel margin-top: 0;  #messageForm button float: right; marcă: 0 0 20px 0;  #messageForm #cancel marginea-dreapta: 20px;  spaniile prietenilor display: block; margine: 0 3px 3px 0; umplutură: 3px 20px 4px 8px; Poziția: relativă; plutește la stânga; culoare de fundal: #eee; frontieră: 1px solid # 333; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; Culoare: # 333; font: normal 11px Verdana, Sans-serif;  #friends span a poziție: absolut; dreapta: 8px; top: 2px; culoare: # 666; font: bold 12px Verdana, Sans-serif; text-decoration: none;  #friends span a: hover culoare: # ff0000;  .ui-meniu .ui-menu-item white-space: nowrap; umplutura: 0 10px 0 0; 

Pentru a da formei o graniță frumoasă transparentă cu colțuri rotunjite, folosim CSS3 RGBA regulă și -Moz-border-radius, -webkit-border-radius și border-radius norme; cele mai populare browsere acceptă acum aceste reguli, inclusiv Firefox, Safari, Chrome și Opera. IE nu susține nici una dintre ele și, deși poate folosi un filtru pentru a implementa opacitatea rudimentară, colțurile rotunjite ar trebui să fie susținute prin utilizarea imaginilor. Eficacitatea RGBA transparența nu este demonstrată la maximum în acest exemplu; dar acest tip de formă ar fi probabil folosit ca o suprapunere modală plutitoare într-o implementare completă, care s-ar situa deasupra conținutului real al paginii.

Containerul

in jurul câmpul pe care câmpul de text Autocomplete va fi atașat este dat aceeași poziționare și stil ca și elemente, dar în interiorul acestui container a fost eliminat marginea acestuia astfel încât să fie ascunsă. De asemenea, reducem lățimea și lăsăm-o spre stânga. Aceasta este atunci când adăugăm destinatarii formatați la

nu va depăși și va crește înălțimea

inutil.

De asemenea, stilul destinatari, care vor fi adăugați la

la fel de elemente care conțin o legătură. În mare parte, acestea sunt concepute pentru a se potrivi cu tema de bază și sunt, de asemenea, date colțuri rotunjite. Este important ca aceste elemente să fie făcute la nivel de bloc și să plutească astfel încât să se stivuiască corect. De asemenea, trebuie să ignorăm o parte din stilul Automcomplete oferit de tema jQuery UI pe care o folosim; ultimul selector previne pur și simplu sugestiile individuale din meniu care se încadrează între cuvinte, ceea ce se întâmplă pentru că am făcut-o este asociat cu atât de mici.

În această etapă, formularul ar trebui să apară astfel:

---

Pasul 4 Atașarea autocompletului

Apoi trebuie să atașăm widgetul Autocomplete la în cadrul

; pentru a face acest lucru putem folosi următorul script:

Widgetul este atașat la folosind autocomplete () metodă. Oferim un obiect literal ca argument al metodei, care configurează sursă și opțiunea Selectați și Schimbare evenimente de apel.

sursă opțiunea este utilizată pentru a indica widget-ul de unde să primiți sugestiile pentru meniul Autocomplete de la. Utilizăm o funcție ca valoare a acestei opțiuni, care acceptă două argumente; primul este termenul introdus în , a doua este o funcție de apel invers care este folosită pentru a transmite sugestiile înapoi la widget.

În cadrul acestei funcții folosim jQuery getJSON () metoda de a trece termenul la un fișier PHP de la server. Fișierul PHP va folosi termenul pentru a extrage nume de contact potrivite dintr-o bază de date MySql. Utilizăm un apel JSONP pentru a procesa datele returnate de la server; funcția de apel invers care este trecut ca al doilea argument la opțiunea sursă se așteaptă să primească datele într-o matrice, așa că mai întâi creăm o matrice goală și apoi folosim jQuery's fiecare() pentru a procesa fiecare element din matricea JSON returnată de server. Pur și simplu iteram peste fiecare element din acest matrice și adăugăm fiecare sugestie la noul nostru matrice. Odată ce noua noastră matrice este construită, o vom transmite funcției de apel invers pentru ca widgetul să fie afișat în meniu.

Apoi definim un manipulator pentru obiceiul de completare al autocompletului Selectați eveniment; această funcție va fi executată de widget de fiecare dată când este selectată o sugestie din meniul Autocomplete. Această funcție este transmisă în mod automat două argumente - obiectul evenimentului și a ui obiect care conține sugestia selectată. Utilizăm această funcție pentru a formata numele destinatarului și a îl adăuga la

. Noi creăm pur și simplu a element pentru a ține textul și un element de ancorare care poate fi utilizat pentru a elimina destinatarul. După ce destinatarul formatat a fost creat, îl inserăm direct în fața camuflării .

În cele din urmă, adăugăm un handler pentru Schimbare eveniment; această funcție va fi invocată ori de câte ori valoarea lui că autocompletarea este asociată cu modificările. Tocmai îl folosim pentru a elimina valoarea din deoarece am adăugat deja versiunea formatată în containerul nostru

. Caratul arată puțin mai sus odată ce a fost adăugat un nume de contact formatat

astfel încât să utilizăm și acest handler de evenimente pentru a corecta acest lucru.

Aceasta este configurația de care avem nevoie pentru această implementare specială, dar mai există încă câteva funcții suplimentare pe care trebuie să le adăugăm puțin mai bine la lucrurile ordonate. După autocomplete () adăugați următorul cod:

/ / adăugați agentul de manipulare a clicurilor prietenilor div $ ("# prieteni"); faceți clic (funcția () // focus 'to' field $ ("# to"). // adăuga trăgător live pentru clicuri pe link-uri de eliminare $ (". remove", document.getElementById ("prieteni")) live ("click", funcția () // elimina prietenul curent $ (this) .parent () ($) ("# friends friends span") lungime === 0) $ ("# to") css ("top", 0); );

că autocompletul nostru este atașat este parțial ascuns și containerul său

este proiectat astfel încât să apară ca și celelalte câmpuri din formular; pentru a finaliza înșelăciunea, adăugăm un manipulator de clicuri la container

astfel încât făcând clic pe oriunde în cadrul acestuia se concentrează realitatea . Din punct de vedere vizual și funcțional acum

ar trebui să fie indisolubil de la un câmp obișnuit.

De asemenea, trebuie să manipulăm clicurile pe ancora care este adăugată fiecărui destinatar formatat; folosim jQuery Trăi() pentru că aceste elemente pot sau nu pot exista pe pagină în orice moment și este mai ușor decât legarea funcției de manipulare de fiecare dată când creați una dintre aceste ancore. Ori de câte ori una dintre aceste ancore este clic pe tot ce facem este să navigați până la părintele ancorei pe care a fost făcut clic și apoi să o eliminați din pagină. Amintiți-vă când am corectat poziția caratei mai devreme în scenariu? Trebuie doar să verificăm dacă toți destinatarii au fost eliminați și, dacă da, resetați poziția sa la valoarea implicită.

---

Pasul 5 Codul suplimentar și resursele

Am folosit o bază de date MySql conținând un tabel cu fiecare nume de destinatar și următorul fișier PHP pentru a accepta datele trimise de getJSON () metoda și trageți destinatarii potriviți din baza de date:

 rând $ [ "name"]);  // echo JSON la pagina $ response = $ _GET ["callback"]. "(". json_encode ($ prieteni). ")"; răspunsul echo $; mysql_close ($ server); ?>

Pentru a rula fișierele exemplu de descărcare, veți avea nevoie de un server Web de dezvoltare cu PHP instalat și configurat, precum și de MySql și baza de date și tabelele corespunzătoare. Când o literă este tastată în câmpul "în", această literă este transmisă serverului și folosită pentru a scoate fiecare nume care începe cu litera care a fost tastată. Numele de potrivire sunt apoi trimise înapoi în pagină ca JSON și afișate în meniul de sugestii:

Acest tutorial a arătat modul de replicare a formularului de trimitere a mesajului Facebook, în special modul în care prietenii sunt adăugați la formularul de mesagerie ca destinatari utilizând o completare automată și modul în care numele prietenilor sunt formatate odată ce au fost adăugate, astfel încât acestea să poată fi eliminate cu ușurință. Formularul nostru de exemplu nu face nimic, dar ceea ce ar trebui să facem pentru a trimite efectiv formularul ar fi să transmitem conținutul formularului într-un fișier de pe server pentru a trimite folosind AJAX, care ar putea fi ușor conectat eveniment al butonului de trimitere utilizat în formular.

Destinatarii ar trebui să aibă un anumit sens în sistemul de back-end, desigur, și probabil vor fi mapați la adresele de e-mail din baza de date. Va trebui să preluăm conținutul textual al fiecăruia dintre ele înainte de a reveni la server, deși ar fi o chestiune destul de trivială.

Utilitarul jQuery UI Autocomplete facilitează conectarea la orice sursă de date și conține o suită bogată de agenți de procesare a evenimentelor la care putem furniza funcții pentru a reacționa la textul introdus în câmpul asociat sau la o sugestie selectată din meniu. Widget-ul este decorat cu ajutorul cadrului extins CSS al jQuery UI și poate fi modificat cu ușurință pentru a se potrivi cu tema site-ului existent. În general, este un widget excelent, ușor de utilizat și care oferă o mare funcționalitate.

Cod

Cum se utilizează cele mai recente actualizări la API Marketplace

Cum se utilizează funcția jQuery pentru selectarea elementelor

×