En snabb Google-sökning kommer att ge massor av praktiska autofullständiga plugins - det finns till och med ett alternativ som delas av jQuery UI som följer med biblioteket. Men idag vill jag titta på en alternativ lösning. Den jQuery Autocomplete plugin som släpptes av DevBridge har den exakta funktionaliteten som jag tycker mest tilltalande.
Stilarna markerar automatiskt ord medan du skriver och resultaten visas i rullgardinsmenyn längst ner. Denna handledning är en kort introduktion till pluginprogrammet genom att ladda innehåll från en JavaScript-grupp. Det är möjligt att ladda Ajax innehåll från en backendfil eller från innehåll ur databasen, men för denna handledning är det lättare att arbeta med lokala data. Kolla in min provdemo för att få en uppfattning om vad vi försöker bygga.
Live Demo - Hämta källkod
Skapa sidan
Ett bra första steg är att ladda ner en kopia av plugin för jQuery Autocomplete. Jag använder den minifierade versionen i min rubrik, tillsammans med en kopia av det senaste jQuery-skriptet. Eftersom jag håller alla förslag inom en JavaScript-array har jag också flyttat de anpassade skripten till en annan separat fil.
Resurserna är inte för svåra att få setup. Och på samma sätt är hela HTML mycket enkelt så att du kan implementera vilken typ av sökdesign som helst på din sida och det ska fungera bra. Jag använder en yttre behållare med ID #searchfield att centrera hela formuläret. Det finns ingen inmatningsknapp för den här demonstrationen, men resultaten kommer automatiskt att visas i fältet dynamiskt sammanhang under inmatningen.
Vi kan rikta in fältet med hjälp av ett ID på #autocomplete. Det finns ingen extra HTML eftersom alla förslag kommer att presenteras med hjälp av JS-koder. Ett annat intressant område är stycket med ett ID på #outputcontent. Här kan vi visa användarens val när de klickar på ett förslag. Normalt på en levande webbplats skulle du istället bara omdirigera användaren till en söksida eller på huvudsidan själv.
Designa med CSS
Jag vill inte gräva för långt in i detalj, men vi bör titta på CSS-stilerna för var och en av förslagsfunktionerna, tillsammans med huvudinmatningsområdet. Den yttre rutan gränsen och innehållsstilar är starkt utvecklade runt sökfältet Design Shack. Var och en av förslagstypen är baserad på standardkoden, som jag har kopierat till mitt stylesheet.
Om du vill behålla dessa i ett separat stilark fylls det fortfarande bra. Men jag försöker kombinera resurser så att vi kan klippa tillbaka på HTTP-förfrågningar från webbläsaren. De två första klasserna riktar sig till hela förslaget popup, tillsammans med varje intern förslag rad. Du kan utforma dem på något sätt som passar din webbplats. Dessutom kommer CSS tillsammans med en vald funktionsklass för att markera text som redan har skrivits av användaren.
Sökfältet själv bör inte vara ett problem oavsett din egen design. jQuery Autocomplete är byggd för att fungera runt alla bredder så att alla förslag kan passa bra in i samma layout. Beviljas mitt exempel tar upp mycket utrymme på sidan, men plugin hanterar det här felfritt utan många anpassningar.
Implementera autokompletteringen
Om du använder Ajax-samtal för att hämta data resultat måste du kanske utföra din egen sökfunktion. jQuery Autocomplete förväntar sig en viss typ av svardata som XML / JSON, och detta bör returneras från PHP, Rails, Python, ASP.NET, etc. Så det mest troliga scenariot är att söka igenom din databastabell med poster och dra ut alla relaterade inlägg och deras webbadresser, returnera sedan listan till din webbläsare.
Vad jag har gjort skapas en rad poster direkt inuti JavaScript för de stora valutorna som finns över hela världen. När du börjar skriva land eller valuta namn kommer du att se en lista med förslag till objekt som dras direkt från matrisen. Det tar lång tid att manuellt infoga data, så jag kommer bara kopiera en liten del av matrisen för att visa hur det görs.
Allt detta innehåll måste läggas till innan du kör egen funktion inom jQuery. Jag har valt att hålla array och anpassade funktionssamtal lagrade i samma JS-fil. Men du kan välja att separera funktioner från data och flytta dem helt och hållet till olika filer. Nu kräver autocomplete plugin bara en liten mängd standardkod.Jag ska kopiera en provmall tillsammans med min live-demokod så att du kan se vad jag har gjort med samma parametrar.
De slå upp parameter används endast för lokala data när vi riktar in en array. onSelect kommer att utlösa en ny funktion varje gång användaren väljer ett förslag. I min live-demo skapar vi helt enkelt en ny sträng HTML för att mata ut det valda namnet och värdet av den posten. Men var snäll och märk att min demo är ett mycket nakent ben exempel på vad som är möjligt.
Kolla in dokumentationen jQuery Autocomplete för att få en bättre uppfattning om några andra parametrar. Jag har inte ens börjat skrapa ytan och JavaScript-utvecklare kan sannolikt lägga samman exempel med många andra parametrar i funktionssamtalet. Men jag vill visa hur lätt det är att få det här pluginet på gång på din webbplats - även med statiska data om det behövs.
Live Demo - Hämta källkod
Slutgiltiga tankar
Om du aldrig har lust runt med autofullständiga förslag måste jag rekommendera detta plugin. Jag har använt några olika lösningar tidigare, men inget har verkligen stått till mig förrän nu. Och det finns en stor skillnad mellan att ladda förslag med sidresultat v. Sökresultat (som Google Instant).
Innan du använder det här pluginet, se till att du har en bra plan för att skapa ett användargränssnitt som fungerar bra. Kompletteringsprogrammet jQuery Autocomplete tillsammans med alla mina källkoder släpps gratis under MIT-licensen så att du är öppen för att använda det här för alla projekt!