Så här använder du jQuery UI Autocomplete Widget

I den här handledningen tittar vi på en av jQuery UI 1.8: s nyaste komponenter - Autocomplete-widgeten. Autofyllande textfält kan vara ett populärt val med besökare på din webbplats eftersom de gör inmatning av information mycket enklare. De kan t.ex. användas i produktsökfält eller när en besökare måste ange ett land, eller en stad eller något annat som kan vara ett val från ett gemensamt dataset. Utöver att vara populär hos besökare är jQuery UI Autocomplete populär bland utvecklare eftersom det är lätt att använda, kraftfullt och flexibelt.

Jag är inte en massiv fan av Facebook, jag föredrar mycket Twitter (@danwellman btw), men en Facebook-funktion som jag gillar är meddelandegenskapen som låter dig skicka ett meddelande till en kompis eller vänner. Jag gillar hur autokompletter används för att göra det lättare att välja dina kompis namn, och hur namnen formateras när de väljs och läggs till i "till" -fältet, t.ex. de har alla en nära länk i dem som gör att namnet enkelt kan tas bort utan att behöva välja någon text.

I den här handledningen använder vi widgeten jQuery UI Autocomplete för att replikera denna aspekt av Facebooks meddelandesystem. Vi kommer inte att titta på att skicka meddelanden men. Det här är vad vi ska skapa:

Steg 1 Komma igång

Vi måste bygga en anpassad nedladdning av jQuery UI som innehåller bara de komponenter vi behöver, gå över till nedladdningsbyggaren på http://jqueryui.com/download. Vi måste använda följande kärnkomponenter:

Kärna
widget
Placera

Vi behöver även själva autokompletterings widgeten, så se till att bara ovanstående föremål, såväl som Autofullständig, är markerade i avsnittet Komponenter till vänster. Använd standardtemat (UI Lightness) och se till att version 1.8 är vald till höger.

När du har laddat ner, skapa en ny mapp på datorn och ring den autoslutförande. Öppna sedan arkivet och kopiera css och js mappar i den nya mappen du just skapat. Detta ger dig alla biblioteksfiler som krävs för detta exempel, inklusive jQuery, så det behöver inte hämtas separat.

Steg 2 Den underliggande HTML

Låt oss titta på HTML för

för det första:

   Nytt meddelandeformulär Nytt meddelande Till:   
 Ämne:  Meddelande:

Det är en ganska vanlig form; Det finns en yttre behållare

vi kan använda för styling och att Autocomplete kommer att bifogas är också inom a

element; vi ska ställa in så att det är lite dolt, och vi kommer att stila

så att det ser ut som de andra fälten i formuläret. Vi ger behållaren till de ui-hjälpar-clearfix klassnamn för att använda denna verktygsklass från jQuery UI: s CSS-ram.

Vi måste också länka till filerna som vi packade upp från jQuery UI-arkivet, samt ett anpassat formatblad. Följande filer ska gå in i av sidan:

Följande filer ska gå i slutet av :

Steg 3 Styling Form

Vi använder ett mycket enkelt, neutralt tema i detta exempel, varav de flesta är rent som ett exempel. Mycket få stilar är nödvändiga och de flesta kan ändras om det behövs. Följande CSS används i autocomplete.css stilark (alla jQuery UI-styling finns i jquery-ui-1.8.custom.css stilark):

#formWrap padding: 10px; position: absolute; flyta till vänster; background-color: # 000; bakgrund: RGBA (0,0,0, 0,5); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;  #messageForm width: 326px; gräns: 1px fast # 666; bakgrundsfärg: #eee;  #messageForm-fält vaddering: 0; marginal: 0; positioner: relativ; kant: none; bakgrundsfärg: #eee;  #messageForm legend visibility: hidden; höjd: 0;  #messageForm span display: block; bredd: 326px; vaddering: 10px 0; marginal: 0 0 20px; text-indent: 20px; bakgrundsfärg: #bbb; border-bottom: 1px solid # 333; typsnitt: 18px Georgia, Serif; färg: #fff;  #friends width: 274px; vaddering: 3px 3px 0; marginal: 0 auto; gränsen: 1px solid #aaa; background-color: #fff; markör: text;  #messageForm #to width: 30px; marginal: 0 0 2px 0; vaddering: 0 0 3px; positioner: relativ; top: 0; flyta till vänster; kant: none;  #messageForm inmatning, #messageForm textarea display: block; bredd: 274px; padding: 3px; marginal: 0 auto 20px; gränsen: 1px solid #aaa;  #messageForm label display: block; marginal: 20px 0 3px; text-indent: 22px; typsnitt: fet 11px Verdana, Sans-serif; color: # 666;  #messageForm #toLabel margin-top: 0;  #messageForm-knappen float: right; marginal: 0 0 20px 0;  #messageForm #cancel margin-right: 20px;  #friends span display: block; marginal: 0 3px 3px 0; vaddering: 3px 20px 4px 8px; positioner: relativ; flyta till vänster; bakgrundsfärg: #eee; gräns: 1px fast # 333; -moz-border-radius: 7PX; -webkit-border-radius: 7PX; border-radius: 7PX; color: # 333; typsnitt: normal 11px Verdana, Sans-serif;  #friends span a position: absolute; höger: 8px; top: 2px; color: # 666; typsnitt: fet 12px Verdana, Sans-serif; text-decoration: none;  #friends span a: svävar färg: # ff0000;  .ui-menyn .ui-meny-objekt white-space: nowrap; vaddering: 0 10px 0 0;

För att ge formen en snygg genomskinlig kant med avrundade hörn använder vi CSS3 RGBA regel och -moz-border-radius, -webkit-border-radius och border-radius regler; Populäraste webbläsare stöder nu dessa regler, inklusive Firefox, Safari, Chrome och Opera. IE stöder inte någon av dem, och även om det kan använda ett filter för att genomföra rudimentär opacitet, skulle avrundade hörn behöva stödjas genom användning av bilder. Effektiviteten hos RGBA Genomskinligheten visas inte fullt ut i det här exemplet. men den här typen av form skulle antagligen användas som en flytande modal överlagring i en fullständig implementering, vilket skulle ligga över det faktiska innehållet på sidan.

Behållaren

runt fält som Autofullständigt textfält kommer att fästas till ges samma positionering och styling som element, men inom denna behållare har gränsen borttagen så att den är gömd. Vi minskar också bredden och flyter den till vänster. Det här är så att när vi lägger till de formaterade mottagarna till

de kommer inte att översvämma och öka höjden på

onödigt.

Vi utformar också mottagarna, som läggs till i

som element som innehåller en länk De flesta är utformade för att matcha det grundläggande temat och ges också avrundade hörn. Det är viktigt att dessa element görs blocknivå och flyter också så att de staplar upp korrekt. Vi måste också åsidosätta några av de automatiska styling som tillhandahålls av jQuery UI-temat vi använder. Den sista väljaren förhindrar helt enkelt att de enskilda förslagen i menyn bryter mellan ord, vilket händer för att vi har gjort den är förknippad med så liten.

På detta stadium ska formuläret se ut så här:

Steg 4 Ansluta autokompletteringen

Nästa måste vi bifoga widgeten Autocomplete till inom

; för att göra detta kan vi använda följande skript:

Widgeten är ansluten till använda automatisk komplettering () metod. Vi tillhandahåller ett objekt bokstavligt som ett argument för metoden, som konfigurerar källa alternativet och Välj och Byta händelseåterkallelser.

De källa alternativet används för att berätta widgeten där man får förslag på Autofullständig-menyn från. Vi använder en funktion som värdet av det här alternativet, vilket accepterar två argument; den första är termen som ingåtts i , den andra är en återuppringningsfunktion som används för att skicka förslag tillbaka till widgeten.

Inom denna funktion använder vi jQuery's getJSON () metod för att överföra termen till en server-sida PHP-fil. PHP-filen kommer att använda termen för att extrahera matchande kontaktnamn från en MySQL-databas. Vi använder en JSONP-återuppringning för att behandla data som returneras från servern. Återuppringningsfunktionen som överförs som det andra argumentet till källalternativet förväntar sig att ta emot data i en array, så vi skapar först en tom array och använder sedan jQuery s varje() metod för att bearbeta varje objekt i JSON-arrayen som returneras av servern. Vi repeterar helt enkelt över varje objekt i denna array och lägger till varje förslag till vår nya array. När vår nya array är uppbyggd skickar vi den till återuppringningsfunktionen för widgeten som ska visas i menyn.

Vi definierar sedan en hanterare för Autocomplete s anpassade Välj händelse; Denna funktion kommer att utföras av widgeten varje gång ett förslag väljs från menyn Autocomplete. Denna funktion skickas automatiskt två argument - händelseobjektet och a ui objekt som innehåller förslaget som valdes. Vi använder den här funktionen för att formatera mottagarens namn och lägga till det i

. Vi skapar helt enkelt en element för att hålla texten och ett ankarelement som kan användas för att ta bort mottagaren. När den formaterade mottagaren har skapats sätter vi in den direkt innan den kamufleras .

Slutligen lägger vi till en hanterare för Byta händelse; Denna funktion kommer att åberopas när värdet av att Autocomplete är associerad med ändringar. Vi använder bara den för att ta bort värdet från eftersom vi redan har lagt till den formaterade versionen i vår behållare

. Karat ser lite högt upp när ett formaterat kontaktnamn har lagts till

så vi använder också denna händelsehanterare för att korrigera detta.

Det här är all den konfiguration vi behöver för denna speciella implementering, men det finns fortfarande ett antal ytterligare funktioner som vi behöver lägga till på snygga saker upp lite. Efter automatisk komplettering () metod lägg till följande kod:

// lägg till klickhanteraren till vänner div $ ("# friends"). klicka (funktion () // fokusera på "fält $ (" # till "). fokus ();); // Lägg till live handler för klick på bort länkar $ (". remove", document.getElementById ("friends")) live ("klicka", funktion () // ta bort nuvarande vän $ (detta) .parent .remove (); // rätt "till" fältposition om ($ ("# friends span") längd === 0) $ ("# till"). css ("top", 0); );

De att vår autofullständighet är kopplad till är delvis dold och dess behållare

är utformad så att den verkar som de andra fälten i formuläret; För att slutföra bedrägeriet lägger vi till en klickhanterare i behållaren

så att man klickar någonstans inom det fokuserar själva . Visuellt och funktionellt nu

bör vara oskiljbar från ett vanligt fält.

Vi måste också hantera klick på ankaret som läggs till varje formaterad mottagare; vi använder jQuery s leva() metod eftersom dessa element kan eller inte finns på sidan vid varje tillfälle och det är lättare än att binda hanterarfunktionen varje gång vi skapar en av dessa ankare. När en av dessa ankare klickas är allt vi gör navigera upp till föräldern på ankret som klickades och sedan ta bort det från sidan. Kom ihåg när vi korrigerade karats position tidigare i manuset? Vi behöver bara kontrollera om alla mottagare har tagits bort och om så är fallet, återställ positionen till dess standard.

Steg 5 Ytterligare kod och resurser

Jag använde en MySql-databas innehållande en tabell med var och en av mottagarens namn och följande PHP-fil för att acceptera de data som skickades av getJSON () metod och dra matchande mottagare från databasen:

 $ Rad [ "name"]);  // echo JSON till sidan $ response = $ _GET ["callback"]. "(". json_encode ($ friends). ")"; echo $ response; mysql_close ($ server); ?>

För att köra de nedladdningsbara exempelfilerna behöver du en utvecklingswebserver med PHP installerat och konfigurerat, liksom MySql och lämplig databas och tabell. När ett brev skrivs in i "till" -fältet, skickas detta brev till servern och används för att dra ut varje namn som börjar med bokstaven som skrivits. De matchande namnen skickas sedan tillbaka till sidan som JSON och visas i förslagsmenyn:

Denna handledning visade hur du replikerar Facebooks formulär för att skicka meddelanden, specifikt sättet som vänner läggs till i meddelandeformuläret som mottagare med hjälp av en Autofullständig och hur vännamnen formateras när de har lagts till så att de enkelt kan tas bort. Vårt exemplarform gör inte någonting, men vad vi skulle behöva för att faktiskt skicka formuläret skulle vara att skicka innehållet i formuläret till en serverns sida för att skicka med AJAX, vilket lätt skulle kunna anslutas till inlämningen händelse av sändningsknappen som används på formuläret.

Mottagarna skulle behöva ha någon form av mening till back-end-systemet självklart, och skulle förmodligen mappas till e-postadresser i databasen. Vi skulle behöva hämta textinnehållet i var och en av element innan de skickas tillbaka till servern, även om detta skulle vara en ganska trivial fråga.

Den jQuery UI Autocomplete-widgeten gör det enkelt att ansluta till någon datakälla och innehåller en rik svit av händelsehanterare som vi kan leverera funktioner till för att reagera på text som skrivs in i det associerade fältet, eller ett förslag väljs från menyn. Widgeten är formaterad med jQuery UI: s omfattande CSS-ram och kan enkelt ändras så att det matchar ditt befintliga webbplatstema. Sammantaget är det en utmärkt widget som är lätt att använda och ger stor funktionalitet.

Koda

Så här använder du de senaste uppdateringarna till Marketplace API

Så här använder du jQuery-funktionen till att välja element