FoxyComplete - Avancerad Autofullständig sökning med bilder
Idag ska jag dela en trendig funktionalitet som jag har genomfört i mina projekt för ett tag nu.
Jag kallar det "FoxyComplete" och vad som händer hämtar klickbara sökresultat tillsammans med bilder antingen automatiskt skrapas från resultatets innehåll eller en angiven fil. Det är enkelt att implementera och en gång gjort, lätt att finjustera.
Tillämpningen av denna funktionalitet är helt beroende av designerns och utvecklarens preferenser, men dess inverkan på användarupplevelsen gör det till ett utmärkt val att lägga till i moderna design och utvecklingsprojekt.
Affärsenheter där jag personligen använt denna funktion är e-handel, företagsdesign, fotografi, underhållning och framtida projekt som kräver en omfattande sökfunktion.
Jag är ganska säker på att du alla har besökt IMDb och Äpple webbplatser och försökte söka funktioner. Om inte - nedan är en förhandsvisning av vad deras avancerade sökfunktion ser ut.
Vi vet alla att det kan göras, men då är frågan: "Varför görs det vanligtvis inte på alla de vackert utformade webbplatser?" Tja, antar jag att det förmodligen är en brist på en snabb och öppen lösning!
När jag genomförde samma autofullständiga sökning med bilder över på min Fotografi Blogg som jag designade för ett tag sedan var det säkert knepigt att uppnå, men i slutändan kom det bra ut. Besökarna på min blogg tycker verkligen om att söka igenom mitt bildgalleri och genast få en förhandsgranskning av vad de kommer att se nästa.
Nedan är hur sökfunktionen på min blogg ser ut.
I denna handledning kommer jag att täcka de nedanstående punkterna
- En kort översikt över manuset
- FoxyComplete som ett WordPress Plugin (Local / Dynamic)
- Genomföra FoxyComplete som en Youtube-sökning med bilder
- Förbättrad säkerhet
För WordPress Designers är det en bit kaka och för WordPress / PHP Developers - det är en stor möjlighet att utforska sina många funktioner och applikationer som den har att erbjuda. För avancerat genomförande skulle kraven vara grundläggande kunskaper i WordPress, PHP, HTML, jQuery och CSS.
En kort översikt över manuset
Låt oss först ta en snygg topp till vad vi ska skapa i denna handledning. Vänligen klicka på bilden nedan för en grundläggande demo .
Tänk på att jag håller denna handledning till en mycket grundläggande nivå för att se till att alla förstår det och vem som helst kan utforma eller anpassa det enligt deras krav. Funktionen som jag har skapat inspirerades av jQuery Autofullständig plugin av Jorn Zaefferer.
Ovanstående snabba exempel autocompletes titeln på resultatet men vi kan också tweak det för att omdirigera till en URL på välj (gjort i nästa avsnitt). Sökfältets ID hålls som "s", vilket är standard som används för WordPress Search Field (skulle vara fördelaktigt när vi fortsätter detta koncept vidareutveckla ett WordPress-plugin).
Styling av resultatet är enkelt: det består av en ren struktur som är lätt att utforma enligt din design.
.ac_results -> .ac_results ul -> .ac_results ul li -> .ac_results ul li a -> .ac_results ul li a img och .ac_results ul li a span
Detta grundläggande exempel använder en statisk datakälla som är en enkel JavaScript-fil där vi har förklarat en array i JSON-format. Alla våra funktioner är att analysera arrayen och visa resultaten.
Oroa dig inte - det är bara en matris med grundläggande nyckel- och värdepar och inget mer än det. Våra nycklar är permalinken för att ta oss till resultatsidan, bilden som ska förhandsgranskas och titeln där vi måste söka i strängen. Jag har behållit en standardbild och en exempeltitel för denna grundläggande demo.
Exempel array struktur
[{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” },{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” },{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” }… Repeat as much as you want to]JavaScript-funktionen är lätt. Vi analyserar bara den resulterande JSON Array i jQuery, formaterar resultaten enligt våra krav och skickar den.
Tips för utvecklarna: Om du vill ändra hur resultaten visas, titta på funktionsformatet () i skriptet foxycomplete.js. Det är en JavaScript-funktion som tar en matris som input och returnerar formaterad HTML som innehåller elementen i arrayen. Ganska grundläggande för att förstå men om du vill ändra det-gör det här!
FoxyComplete som ett WordPress-plugin (lokal / dynamisk)
Klicka på bilden nedan för att ladda ner WordPress-plugin som en .zip-fil.
För designers
Jag hoppas du kommer ihåg att jag sa att det var tänkt att vara en bit tårta för designers, ja här är det! FoxyComplete som ett Plug-n-Play WordPress-plugin som fungerar rakt ur rutan - bara enkel konfiguration krävs för grundläggande implementering. Allt du behöver göra är att ladda ner det, installera det och spela runt medan du designar för det.
Pluginalternativen är som nedan:
Aktivera lokal sökning: Efter att ha bläddrat några webbplatser upptäckte jag att deras sökalternativ var oerhört snabbt - även med en stor databas, t.ex. IMDB. Det första som slogs var deras avancerade snabba servrar - men hur är det med de vanliga användarna som har delat värd och varierande mängder data? Därför gjorde jag lokal sökning ett prioriterat alternativ. Det laddar helt enkelt en JavaScript-fil i sidfoten av din WordPress-installation, som innehåller en array till alla dina inlägg och sidor tillsammans med deras webbadresser och, om de hittades, bildförhandsgranskningar. Plugin är standard för dynamisk sökning, även om du kan ändra den när som helst för lokal sökning.
Limit: En säker skulle behöva en kontroll över gränsen för de resultat som visas. Det hjälper till att hålla konsistens med designen och tillåta användare att få bara de mest relevanta resultaten. Det motsvarar fem högsta relevanta resultat.
Autofullständighetens bredd: Ursprungligen var den alltid hållen lika med ingångens bredd men då insåg jag att vi inte letade i en stor sökfält i Google-stil. Det är fortfarande standardinställnings bredd men du kan ändra det när som helst.
Ingångens ID: Eftersom det är ett WordPress-plugin, gav jag preferens till "#s" som ett standardval som kan ändras till vad som helst du vill. Ange bara ID-numret (utan "#") av det önskade inmatningselementet och det är ett steg.
Standardbild: Ibland kan plugin inte hitta en relevant bild och för det har jag tagit med en demo-bild, men du har också kontroll över det: bara byt ut det med din egen provbild i plugin-katalogen.
Dynamisk sökning letar efter relevant innehåll intelligent och levererar en dynamisk JSON-array till funktionaliteten omedelbart. Först samlar det alla inlägg och sidor i WordPress-installationen som publiceras och publiceras. Då söker den bilderna i tre steg från innehållet som:
- Media uppladdningar
- "Thumbnail" anpassat fält
- Bilder i Postinnehållet
När den har alla data kombinerar den titeln och respektive innehållet i varje post / sida och söker efter det efterfrågade objektet för en omfattande sökupplevelse. När vi funnit det, låt oss säga X antal objekt - det trycker på dem X är till en JSON-array, som returneras till JavaScript-funktionaliteten.
Dynamisk mot lokal funktionalitet
Detta är ett kritiskt ämne och jag är öppen för en diskussion i kommentarfältet. Jag känner personligen att det inte är någon skada som ger dem en lokal källa om det ökar erfarenheten av många veck. En annan anledning till att jag genomförde den lokala sökningen var att jag hittade även Google implementera den i Gmail.
När användaren loggar in skickar Gmail en begäran till servern och hämtar alla e-postadresser och namn eller alias av alla dina kontakter i sidfoten som sedan används för fälten Till, CC, BCC och Etiketter. Vad säger du, legitim?
Genomföra FoxyComplete som en YouTube-liknande sökning med bilder
Som nämnts ovan finns också en hel del funktionalitet för utvecklare. Ovanstående är vad vi gjorde med YouTube-flöden och sedan analyserar dem i PHP för att ge de önskade resultaten i JSON-format. Du kan lära dig om dem här . Klicka på bilden nedan för en demonstration av YouTube Foxcomplete Search.
En annan funktion som du kan göra är YouTube-sökmotorn med klickning i modal eller överlagring. När du till exempel söker efter en video och klickar på den i autofullständiga resultat öppnas en modal dialogruta eller ett överlägg med videon i det, som spelas på din webbplats men kommer från YouTube. Trevligt, eller hur?
Förbättrad säkerhet
Även om WordPress-pluginet är säkert som jag använde WordPress Nounces , det kan göras jämnt säkert genom att använda konstanter i den dynamiska versionen och kryptering i det lokala.
En säkerhetsåtgärd som vi använde var att leta efter ett Ajax-samtal och sedan också leta efter ett Ajax-samtal från samma domän som visas nedan.
//define SAME_DOMAIN to true in the Header of your document.define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');define('DOING_AJAX', true);if(IS_AJAX && DOING_AJAX && SAME_DOMAIN){//your search logic}Det är bara ett av många sätt att säkra det!
Slutsats
Så det var FoxyComplete som kan hjälpa dig mycket i dina design- och utvecklingsprojekt i framtiden. Detta är Version 1.0 och jag ska se till att fortsätta förbättra det med din värdefulla feedback och support.
Låt mig veta vad du tycker i kommentarfältet nedan och eftersom det här är värd för en miljö kan jag enkelt och regelbundet redigera. Med dina superförslag kan vi göra det till ett bra gratis plugin med ultimata användarupplevelse i båda ändarna.