Slik bruker du jQuery UI Autocomplete Widget

Vi må også koble til filene vi har pakket ut fra jQuery UI-arkivet, samt et tilpasset stilark; Følgende filer skal gå inn i av siden:

Følgende filer skal gå på slutten av :

Trinn 3 Styling Form

Vi bruker et veldig enkelt, nøytralt tema i dette eksemplet, hvorav det meste er rent som et eksempel. Svært få av stilene kreves, og de fleste kan endres om nødvendig. Følgende CSS brukes i autocomplete.css stilark (alle jQuery UI styling er i jquery-ui-1.8.custom.css stilark):

#formWrap polstring: 10px; stilling: absolutt; float: venstre; background-color: # 000; bakgrunn: RGBA (0,0,0, 0,5); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;  #messageForm width: 326px; grense: 1px solid # 666; background-color: #eee;  #messageForm fieldset padding: 0; margin: 0; stilling: i forhold; border: none; background-color: #eee;  #messageForm legend synlighet: skjult; høyde: 0;  #messageForm span display: block; bredde: 326px; polstring: 10px 0; margin: 0 0 20px; text-indent: 20px; background-color: #bbb; grensebunn: 1px solid # 333; font: 18px Georgia, Serif; farge: #fff;  #friends width: 274px; polstring: 3px 3px 0; margin: 0 auto; grense: 1px solid #aaa; background-color: #fff; markøren: tekst;  #messageForm #to width: 30px; margin: 0 0 2px 0; polstring: 0 0 3px; stilling: i forhold; topp: 0; float: venstre; border: none;  #messageForm input, #messageForm textarea display: block; bredde: 274px; padding: 3px; margin: 0 auto 20px; grense: 1px solid #aaa;  #messageForm label display: block; margin: 20px 0 3px; text-indent: 22px; font: fet 11px Verdana, Sans-serif; color: # 666;  #messageForm #toLabel margin-top: 0;  #messageForm-knappen float: right; margin: 0 0 20px 0;  #messageForm #cancel margin-right: 20px;  #friends span display: block; margin: 0 3px 3px 0; polstring: 3px 20px 4px 8px; stilling: i forhold; float: venstre; background-color: #eee; grense: 1px solid # 333; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; color: # 333; font: normal 11px Verdana, Sans-serif;  #friends span en posisjon: absolute; høyre: 8 piksler; top: 2 piksler; color: # 666; font: fet 12px Verdana, Sans-serif; text-decoration: none;  #friends span a: hover color: # ff0000;  .ui-menu .ui-meny-element white-space: nowrap; polstring: 0 10px 0 0; 

For å gi skjemaet en fin gjennomsiktig ramme med avrundede hjørner bruker vi CSS3 RGBA regelen og -moz-border-radius, -webkit-border-radius og border-radius regler; mest populære nettlesere støtter nå disse reglene, inkludert Firefox, Safari, Chrome og Opera. IE støtter ikke noen av dem, og selv om det kan bruke et filter for å implementere rudimentær opacitet, vil avrundede hjørner måtte støttes ved bruk av bilder. Effektiviteten av RGBA gjennomsiktighet er ikke vist fullt ut i dette eksemplet; men denne typen form ville trolig bli brukt som flytende modal overlegg i en full implementering, som ville sitte over det faktiske innholdet på siden.

Beholderen

rundt feltet som Autofullfør tekstfeltet vil bli festet til, blir gitt samme posisjonering og styling som elementer, men innenfor denne beholderen har grensen fjernet slik at den er skjult. Vi reduserer også bredden og flyter den til venstre. Dette er slik at når vi legger til formaterte mottakere til

de vil ikke overløpe og øke høyden på

unødvendig.

Vi stiler også mottakerne, som blir lagt til i

som elementer som inneholder en lenke. De fleste er utformet for å matche det grunnleggende temaet og får også avrundede hjørner. Det er viktig at disse elementene blir laget på blokknivå og også flyter slik at de stabler riktig opp. Vi må også overstyre noen av de automatiske stilene som tilbys av jQuery UI-temaet vi bruker; Den siste selgeren forhindrer bare de enkelte forslagene i menyen som bryter mellom ord, noe som skjer fordi vi har laget det er forbundet med så lite.

På dette stadiet skal skjemaet se slik ut:

---

Trinn 4 Feste autofullføringen

Deretter må vi legge ved Autocomplete-widgeten til innen

; for å gjøre dette kan vi bruke følgende skript:

Widgeten er festet til bruker autofullfør () metode. Vi leverer et objekt bokstavelig som et argument til metoden, som konfigurerer kilde alternativet og å velge og endring Hendelses tilbakeringinger.

De kilde alternativet brukes til å fortelle widgeten hvor du får forslagene til Autofullfør-menyen fra. Vi bruker en funksjon som verdien av dette alternativet, som aksepterer to argumenter; den første er begrepet inngått i , den andre er en tilbakeringingsfunksjon som brukes til å sende forslagene tilbake til widgeten.

Innenfor denne funksjonen bruker vi jQuery's getJSON () Metode for å sende termen til en server-side PHP-fil. PHP-filen vil bruke termen til å trekke ut samsvarende kontaktnavn fra en MySQL-database. Vi bruker en JSONP tilbakeringing for å behandle dataene som returneres fra serveren; tilbakeringingsfunksjonen som overføres som det andre argumentet til kildealternativet, forventer å motta dataene i en matrise, slik at vi først lager et tomt utvalg og bruker jQuery's Hver() metode for å behandle hvert element i JSON-arrayet returnert av serveren. Vi repeterer bare over hvert element i denne gruppen, og legger til hvert forslag til vårt nye utvalg. Når vårt nye array er bygget, sender vi det til tilbakeringingsfunksjonen for widgeten som skal vises i menyen.

Vi definerer da en handler for Autocomplete's tilpassede å velge begivenhet; Denne funksjonen blir utført av widgeten hver gang et forslag er valgt fra Autofullfør-menyen. Denne funksjonen overføres automatisk to argumenter - hendelsesobjektet og a ui objekt som inneholder forslaget som ble valgt. Vi bruker denne funksjonen til å formatere mottakernavnet og legge det til

. Vi oppretter bare en element for å holde teksten og et ankerelement som kan brukes til å fjerne mottakeren. Når formatert mottaker er opprettet, legger vi bare inn det direkte før det kamufleres .

Til slutt legger vi til en handler for endring begivenhet; Denne funksjonen vil bli påkalt når verdien av at Autofullførelsen er knyttet til endringer. Vi bruker bare den til å fjerne verdien fra fordi vi allerede har lagt til den formaterte versjonen i vår container

. Karat ser litt høyt oppe når et formatert kontaktnavn er lagt til

så vi bruker også denne hendelseshandleren for å rette opp dette.

Dette er all konfigurasjon vi trenger for denne bestemte implementeringen, men det er fortsatt et par tilleggsfunksjoner vi trenger for å legge til ryddige ting opp litt. Etter autofullfør () metode legg til følgende kode:

// legg til klikkbehandler til venner div $ ("# venner"). klikk (funksjon () // fokus 'til' felt $ ("# til") .fokus ();); // legg til live handler for klikk på fjern linker $ (". remove", document.getElementById ("venner")) live ("klikk", funksjon () // fjern gjeldende venn $ (dette) .parent .remove (); // riktig 'til' feltposisjon hvis ($ ("# friends span") lengde === 0) $ ("# til"). css ("topp", 0); );

De at vår Autofullføring er festet til, er delvis skjult og dens container

er utformet slik at det ser ut som de andre feltene på skjemaet; For å fullføre bedragene legger vi til en klikkbehandler i containeren

slik at du klikker hvor som helst innenfor det fokuserer den faktiske . Visuelt og funksjonelt nå

bør skille seg fra et vanlig felt.

Vi må også håndtere klikk på ankeret som legges til hver formatert mottaker; vi bruker jQuery's bo() metode fordi disse elementene kan eller ikke eksisterer på siden til enhver tid, og det er lettere å binde håndteringsfunksjonen hver gang vi oppretter en av disse ankre. Når en av disse ankrene klikkes, er alt vi gjør, navigere opp til forankringen av ankeret som ble klikket og deretter fjernet det fra siden. Husk da vi korrigerte karatets posisjon tidligere i skriptet? Vi må bare sjekke om alle mottakerne er fjernet, og i så fall tilbakestill posisjonen tilbake til standardinnstillingen.

---

Trinn 5 Tilleggskode og ressurser

Jeg brukte en MySql-database som inneholder en tabell som viser hvert av mottakernavnene, og følgende PHP-fil for å godta dataene som sendes av getJSON () metode og trekk tilsvarende mottakere fra databasen:

 $ Rad [ "navn"]);  // echo JSON til side $ respons = $ _GET ["tilbakeringing"]. "(". json_encode ($ friends). ")"; " ekko $ respons; mysql_close ($ server); ?>

For å kjøre de nedlastbare eksempelfilene, trenger du en utviklingswebserver med PHP installert og konfigurert, samt MySQL og riktig database og tabell. Når et brev er skrevet inn i "til" -feltet, sendes dette brevet til serveren og brukes til å trekke ut hvert navn som begynner med brevet som ble skrevet. De matchende navnene sendes deretter tilbake til siden som JSON og vises i forslag-menyen:

Denne opplæringen viste hvordan du replikerer Facebooks meldingsskjema, spesielt hvordan venner legges til meldingsskjemaet som mottakere ved hjelp av en Autofullføring, og hvordan vennenavnene er formatert når de er lagt til, slik at de enkelt kan fjernes. Vårt eksempelskjema gjør egentlig ikke noe, men det vi trenger å gjøre for å sende skjemaet, ville være å sende innholdet i skjemaet til en server-sidefil for sending ved hjelp av AJAX, som lett kunne bli hekta inn i sendingen Hendelse av send-knappen som brukes på skjemaet.

Mottakerne vil trenge å ha en slags mening til back-end-systemet selvfølgelig, og vil trolig bli kartlagt til e-postadresser i databasen. Vi trenger å hente tekstinnholdet i hver av elementer før du går tilbake til serveren, selv om dette ville være en ganske triviell sak.

JQuery UI Autocomplete-widgeten gjør det enkelt å koble til en datakilde og inneholder en rik pakke med hendelseshåndterere som vi kan levere funksjoner til for å reagere på tekst som kommer inn i det tilhørende feltet, eller et forslag velges fra menyen. Widgeten er utformet med jQuery UIs omfattende CSS-rammeverk og kan enkelt endres slik at det samsvarer med ditt eksisterende nettstedstema. Alt i alt er det en utmerket widget som er enkel å bruke og gir god funksjonalitet.

Kode

Slik bruker du de nyeste oppdateringene til Marketplace API

Slik bruker du jQuery-funksjonen til å velge elementer

×