FoxyComplete - Avanceret Autofuldførelse Søg med billeder
I dag vil jeg dele en trendy funktionalitet, som jeg har implementeret i mine projekter i et stykke tid nu.
Jeg kalder det "FoxyComplete", og hvad der sker, er at hente klikbare søgeresultater sammen med billeder, enten automatisk skrabet fra resultatets indhold eller en specificeret fil. Det er nemt at implementere og en gang gjort, let at finjustere.
Anvendelsen af denne funktionalitet er rent afhængig af designeren og udviklerens præference, men dens indflydelse på brugeroplevelsen gør det til det bedste valg at tilføje i moderne design og udviklingsprojekter.
Forretningsenheder, hvor jeg personligt har brugt denne funktionalitet, er e-handel, corporate designs, fotografering, underholdning og fremtidige projekter, der kræver en omfattende søgefunktion.
Jeg er ret sikker på, at du alle har besøgt IMDb og Æble websteder og forsøgte deres søgefunktioner. Hvis ikke - nedenfor er et eksempel på, hvordan deres avancerede søgefunktionalitet ligner.
Vi ved alle, at det kan gøres, men så er spørgsmålet: "Hvorfor bliver det normalt ikke gjort på tværs af alle de smukt udformede hjemmesider?" Nå, det er vel nok en mangel på en hurtig og åben løsning.
Da jeg implementerede samme Autofuldfør søgning med billeder over på min Fotografi Blog som jeg designede for en tid siden, var det sikkert vanskeligt at opnå, men til sidst kom det godt ud. Besøgende på min blog nyder virkelig at søge gennem mit billedgalleri og øjeblikkeligt få et eksempel på, hvad de vil se næste.
Nedenfor ses, hvordan søgefunktionen på min blog ser ud.
I denne vejledning skal jeg dække nedenstående punkter
- Et kort overblik over scriptet
- FoxyComplete som et WordPress-plugin (Local / Dynamic)
- Implementering FoxyComplete som en Youtube-søgning med billeder
- Forbedring af sikkerheden
For WordPress Designers er det et stykke kage og for WordPress / PHP Developers - det er en stor mulighed for at udforske dens mange funktioner og applikationer, den har at tilbyde. For avanceret implementering vil kravene være grundlæggende kendskab til WordPress, PHP, HTML, jQuery og CSS.
Et kort overblik over scriptet
Lad os først hurtigt tage en sneak peak til hvad, hvad vi vil skabe i denne tutorial. Venligst klik på nedenstående billede for a grundlæggende demo .
Vær opmærksom på, at jeg holder denne vejledning til et meget grundlæggende niveau for at sikre, at alle forstår det, og alle kan designe eller tilpasse det efter deres krav. Den funktionalitet, jeg har lavet, var inspireret af jQuery Autofuldførelse plugin af Jorn Zaefferer.
Ovennævnte hurtige eksempel autocompletter titlen på resultatet, men vi kan også finjustere det for at omdirigere til en URL på vælg (udført i næste afsnit). Navnet på søgefeltet holdes som "s", hvilket er den standard, der bruges til WordPress Search Field (ville være gavnligt, da vi fortsætter dette koncept yderligere for at udvikle et WordPress-plugin).
Styling af resultaterne er let: Den består af en ren struktur, der er let at style efter dit design.
.ac_results -> .ac_results ul -> .ac_results ul li -> .ac_results ul li a -> .ac_results ul li a img og .ac_results ul li a span
Dette grundlæggende eksempel bruger en statisk datakilde, som er en simpel JavaScript-fil, hvor vi har erklæret en matrix i JSON-format. Al vores funktionalitet er at analysere arrayet og vise resultaterne.
Bare rolig - det er bare en matrix med grundlæggende nøgle- og værdipar og ikke mere end det. Vores nøgler er permalinken til at tage os til resultatsiden, billedet der skal forhåndsvises, og titlen , hvor vi skal søge i strengen. Jeg har holdt et standardbillede og et eksempel på titlen til denne grundlæggende demo.
Eksempel 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-funktionaliteten er let. Vi analyserer kun det resulterende JSON Array i jQuery, formater resultaterne efter vores krav og send det.
Tip til udviklerne: I tilfælde af at du ønsker at ændre, hvordan resultaterne vises, skal du se på funktionsformatet () i scriptet foxycomplete.js. Det er en JavaScript-funktion, der tager et array som input og returnerer formateret HTML, der indeholder elementerne i arrayet. Ganske grundlæggende at forstå, men hvis du søger at ændre det-gør det her!
FoxyComplete som et WordPress-plugin (lokal / dynamisk)
Klik på nedenstående billede for at downloade WordPress-plugin som en .zip-fil.
Til designerne
Jeg håber du husker at jeg sagde, at det skulle være et stykke kage til designere, godt her er det! FoxyComplete som et Plug-n-Play WordPress-plugin Det virker lige ud af boksen - bare en simpel konfiguration er nødvendig for grundlæggende implementering. Alt du skal gøre er at downloade det, installere det og lege, mens du designer det.
Plugin Options er som nedenfor:
Aktivér lokal søgning: Efter at have gennemvist et par hjemmesider fandt jeg, at deres søgemuligheder var utroligt hurtige - selv med en enorm database-eksempel IMDB. Den første ting, der blev ramt, var deres avancerede hurtige servere - men hvad med de faste brugere, der har delt hosting og varierede mængder data? Derfor lavede jeg lokal søgning som en prioriteret mulighed. Det lægger simpelthen en JavaScript-fil i foden af din WordPress-installation, der indeholder en matrix til alle dine indlæg og sider sammen med deres webadresser og, hvis de findes, billedforhåndsvisninger. Pluginet er standard til dynamisk søgning, selv om du kan ændre det når som helst til lokal søgning.
Grænse: Man ville sikkert have brug for en kontrol over grænsen for de viste resultater. Det hjælper med at holde konsistens med designet og tillade brugere at få kun de mest relevante resultater. Det er normalt fem top relevante resultater.
Autofuldførelsens bredde: Oprindelig var den altid lig med indgangens bredde, men så indså jeg, at vi ikke søgte på en bred søgefelt i Google-stil. Den er stadig standard til inputelementets bredde, men du kan ændre det til enhver tid.
ID for Input: Da det er et WordPress-plugin, gav jeg fortrinsret til "#s" som et standardvalg, som kan ændres til hvad du vil. Indtast kun id'et (uden '#') af dit ønskede inputelement, og det er en tur.
Standardbillede: Ibland kan plugin muligvis ikke finde et relevant billede, og for det har jeg inkluderet et demo-billede, men du har også kontrol over det: Bare erstat det med dit eget eksempelbillede i plugin-mappen.
Den dynamiske søgning søger efter relevant indhold intelligent og leverer et dynamisk JSON array til funktionaliteten med det samme. Først samler det alle indlæg og sider i WordPress-installationen, der offentliggøres og offentliggøres. Så søger den billederne i 3 trin fra indholdet som:
- Media uploads
- Brugerdefineret felt "Miniature"
- Billeder i postindholdet
Når den har alle dataene, kombinerer den titel og respektive indhold på hver post / side og søger efter forespørgslen for en omfattende søgeoplevelse. Når vi har fundet det, lad os sige X antal emner-det skubber dem X er til et JSON-array, som returneres til JavaScript-funktionaliteten.
Dynamisk vs lokal funktionalitet
Dette er et kritisk emne, og jeg er åben for en diskussion i kommentarfeltet. Jeg føler personligt, at der ikke er nogen skade, der giver dem en lokal kilde, hvis det forbedrer oplevelsen med mange folder. En anden grund til, at jeg implementerede den lokale søgning, var fordi jeg fandt selv Google implementere det i Gmail.
Når brugeren logger ind, sender Gmail en anmodning til sin server og henter alle e-mailadresser og navne eller aliaser af alle dine kontaktpersoner i sidefoden, som derefter bruges til felterne Til, CC, BCC og Etiketter autofuldførelse. Hvad siger du, legitim?
Implementering FoxyComplete som en YouTube-lignende søgning med billeder
Som nævnt ovenfor er der også en masse funktionalitet til udviklere. Ovenfor er det, vi gjorde ved hjælp af YouTube-feeds og derefter parsing dem i PHP for at give de ønskede resultater i JSON-format. Du kan lære om dem her . Klik på nedenstående billede for en demo af YouTube Foxycomplete Search.
En anden funktionalitet, du kan gøre, er YouTube-søgemaskinen med klik på afspilning i modal eller overlay. Når du f.eks. Søger efter en video og klikker på den i autofuldførelsesresultaterne, åbnes det en modal dialogboks eller et overlay med videoen i den, der afspilles på dit websted, men hentes fra YouTube. Nice, er det ikke?
Forbedring af sikkerheden
Selv om WordPress-plugin'et er sikkert, som jeg brugte WordPress Nounces , det kan gøres lige sikkert ved at bruge konstanter i den dynamiske version og kryptering i det lokale.
En sikkerhedsforanstaltning, vi brugte, var at tjekke efter et Ajax-opkald og derefter også tjekke efter et Ajax-opkald fra det samme domæne som vist nedenfor.
//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 er bare en af mange måder at sikre det på!
Konklusion
Så det var FoxyComplete, der kunne hjælpe dig meget i dine design- og udviklingsprojekter i fremtiden. Dette er Version 1.0, og jeg vil sørge for at fortsætte med at forbedre det med din værdifulde feedback og support.
Lad mig vide, hvad du synes i kommentarfeltet nedenfor, og da dette er hostet på et miljø, kan jeg nemt og regelmæssigt redigere. Med dine superforslag kan vi gøre det til et godt gratis plugin med ultimative brugeroplevelse i begge ender.