FoxyComplete - Avansert Autofullfør Søk med bilder
I dag skal jeg dele en trendy funksjonalitet som jeg har implementert i prosjektene mine for en stund nå.
Jeg kaller det "FoxyComplete", og hva som er, er å hente klikkbare søkeresultater sammen med bilder enten automatisk skrapt fra resultatets innhold eller en spesifisert fil. Det er enkelt å implementere og en gang gjort, enkelt å justere.
Anvendelsen av denne funksjonaliteten er rent avhengig av designeren og utviklerens preferanse, men dens innvirkning på brukeropplevelsen gjør det til et toppvalg å legge til i moderne design og utviklingsprosjekter.
Forretningsenheter der jeg personlig har brukt denne funksjonaliteten, er e-handel, bedriftsdesign, fotografering, underholdning og fremtidige prosjekter som krever en omfattende søkefunksjon.
Jeg er ganske sikker på at dere alle har besøkt IMDb og eple nettsteder og prøvde søkefunksjonene sine. Hvis ikke - nedenfor er en forhåndsvisning av hva deres avanserte søkefunksjonalitet ser ut som.
Vi vet alle at det kan gjøres, men så er spørsmålet: "Hvorfor gjøres det vanligvis ikke på tvers av alle de vakkert utformede nettstedene?" Vel, det er vel nok en mangel på en rask, åpen løsning.
Da jeg implementerte samme Autofullfør søk med bilder over på min Fotografi Blogg som jeg designet for en stund siden, var det sikkert vanskelig å oppnå, men til slutt kom det bra ut. Besøkende på bloggen min liker å søke gjennom bildegalleriet og få en forhåndsvisning av hva de vil se neste.
Nedenfor er hvordan søkefunksjonen på bloggen min ser ut.
I denne opplæringen skal jeg dekke de nevnte punktene
- En kort oversikt over skriptet
- FoxyComplete som en WordPress Plugin (Local / Dynamic)
- Implementere FoxyComplete som en Youtube-søk med bilder
- Forbedre sikkerheten
For WordPress Designers er det et stykke kake og for WordPress / PHP Developers - det er en stor mulighet til å utforske sine mange funksjoner og applikasjoner den har å tilby. For avansert implementering vil kravene være grunnleggende kunnskap om WordPress, PHP, HTML, jQuery og CSS.
En kort oversikt over skriptet
La oss først raskt ta en sneak peak til hva vi skal skape i denne opplæringen. Vennligst klikk på bildet nedenfor for a grunnleggende demo .
Vær oppmerksom på at jeg holder denne opplæringen til et svært grunnleggende nivå for å sikre at alle forstår det, og hvem som helst kan designe eller tilpasse det i henhold til deres krav. Funksjonaliteten som jeg har laget var inspirert fra jQuery Autofullfør Plugin av Jorn Zaefferer.
Ovennevnte hurtigeksempel fullfører tittelen på resultatet, men vi kan også justere det for å omdirigere til en URL på velg (ferdig i neste avsnitt). ID-feltet i søkefeltet holdes som "s", som er standard som brukes til WordPress Search Field (ville være fordelaktig når vi fortsetter dette konseptet videre for å utvikle et WordPress-plugin).
Styling av resultatene er enkelt: Den består av en ren struktur som er lett å style i henhold til 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 grunnleggende eksemplet bruker en statisk datakilde som er en enkel JavaScript-fil der vi har erklært en matrise i JSON-format. All vår funksjonalitet er å analysere arrayet og vise resultatene.
Ikke bekymre deg - det er bare en matrise med grunnleggende nøkkel- og verdipar og ingenting mer enn det. Våre nøkler er permalinken for å ta oss til resultatsiden, bildet som skal forhåndsvises, og tittelen der vi må søke i strengen. Jeg har holdt et standardbilde og et eksempel tittel for denne grunnleggende demoen.
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-funksjonaliteten er enkel. Vi analyserer bare det resulterende JSON Array i jQuery, formater resultatene i henhold til våre krav, og send det på skjermen.
Tips for utviklerne: I tilfelle du ønsker å endre hvordan resultatene vises, ta en titt på funksjonsformatet () i skriptet foxycomplete.js. Det er en JavaScript-funksjon som tar en matrise som input og returnerer formatert HTML som inneholder elementene i arrayet. Ganske grunnleggende å forstå, men hvis du ønsker å endre det, gjør det her!
FoxyComplete som et WordPress-plugin (lokal / dynamisk)
Klikk på bildet nedenfor for å laste ned WordPress Plugin som en .zip-fil.
For designerne
Jeg håper du husker at jeg sa at det skulle være et stykke kake for designere, vel, her er det! FoxyComplete som en Plug-n-Play WordPress Plugin som fungerer rett ut av boksen - bare enkel konfigurasjon er nødvendig for grunnleggende implementering. Alt du trenger å gjøre er å laste den ned, installere den og lek mens du designer for den.
Plugin-alternativene er som følger:
Aktiver lokal søk: Etter å ha surfet på noen nettsteder fant jeg ut at deres søkemulighet var utrolig rask - selv med en stor database-eksempel IMDB. Det første som slo seg var deres avanserte raske servere - men hva med de vanlige brukerne som har delt hosting og varierte datamengder? Det er derfor jeg gjorde lokal søk som et prioriteringsalternativ. Det laster bare en JavaScript-fil i bunnteksten til WordPress-installasjonen, som inneholder en matrise til alle dine innlegg og sider sammen med deres nettadresser og, hvis de er funnet, bildeforhåndsvisninger. Pluggen er standard for dynamisk søk, selv om du kan endre det når som helst for lokalt søk.
Limit: Man vil sikkert trenge kontroll over grensen for resultatene som vises. Det bidrar til å holde konsistens med designet og tillate brukere å få bare de mest relevante resultatene. Det er standard fem topprelaterte resultater.
Bredden på Autofullførelsen: Opprinnelig ble den alltid holdt lik innspillets bredde, men da skjønte jeg at vi ikke søkte på en søkebrett i Google-stil. Den er fortsatt standard til inngangselementets bredde, men du kan endre det når som helst.
ID av inngangen: Siden det er et WordPress-plugin, ga jeg preferanse til "#s" som et standardvalg som kan endres til det du vil. Bare skriv inn ID-en (uten '#') av ønsket innspillingselement, og det er en tur.
Standardbilde: Noen ganger kan pluginet kanskje ikke finne et relevant bilde, og for det har jeg tatt med et demo-bilde, men du har også kontroll over det: Bare erstatt det med ditt eget eksempelbilde i plugin-mappen.
Dynamisk søk ser etter relevant innhold intelligent og leverer et dynamisk JSON-array til funksjonaliteten umiddelbart. Først samler det alle innlegg og sider i WordPress-installasjonen som publiseres og offentliggjøres. Deretter søker den bildene i tre trinn fra innholdet som:
- Media Uploads
- "Miniatyr" egendefinert felt
- Bilder i innleggets innhold
Når den har alle dataene, kombinerer den tittelen og det respektive innholdet i hvert innlegg / side og søker etter det forespurte elementet for en omfattende søkeopplevelse. Når det er funnet, la oss si X antall elementer - det skyver dem X er til et JSON-array, som returneres til JavaScript-funksjonaliteten.
Dynamisk vs lokal funksjonalitet
Dette er et kritisk tema, og jeg er åpen for en diskusjon i kommentarfeltet. Jeg føler meg personlig at det ikke er noen skade som gir dem en lokal kilde hvis den forbedrer opplevelsen med mange folder. En annen grunn til at jeg implementerte lokal søk, var fordi jeg fant til og med Google implementerer den i Gmail.
Når brukeren logger på, sender Gmail en forespørsel til sin server og henter alle e-postadressene og navnene eller aliasene til alle kontaktene dine i bunnteksten som deretter brukes til feltene Til, CC, BCC og Etiketter autofullfør. Hva sier du, legitim?
Implementere FoxyComplete som et YouTube-lignende søk med bilder
Som nevnt ovenfor, er det også mye funksjonalitet for utviklere. Ovenfor er det vi brukte ved hjelp av YouTube-feeder og deretter analyserte dem i PHP for å gi de nødvendige resultatene i JSON-format. Du kan lære om dem her . Klikk på bildet nedenfor for en demonstrasjon av YouTube Fox-komplett søk.
En annen funksjonalitet du kan gjøre er YouTube-søkemotoren med klikk-avspilling i modal eller overlegg. For eksempel, når du søker etter en video og klikker den i autofullføringsresultater, åpnes det en modal dialogboks eller et overlegg med videoen i den, som spilles på nettstedet ditt, men hentes fra YouTube. Nice, ikke sant?
Bedre sikkerhet
Selv om WordPress-pluginet er sikkert som jeg brukte WordPress Nounces , det kan gjøres jevnt sikker ved å bruke konstanter i den dynamiske versjonen og kryptering i det lokale.
Et sikkerhetsmål vi brukte var å sjekke om et Ajax-anrop og deretter også sjekke om et Ajax-anrop fra samme domene 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 av mange måter å sikre det på!
Konklusjon
Så det var FoxyComplete som kunne hjelpe deg med mye i design og utviklingsprosjekter i fremtiden. Dette er versjon 1.0, og jeg skal sørge for å fortsette å forbedre den med verdifull tilbakemelding og støtte.
Gi meg beskjed om hva du synes i kommentarfeltet nedenfor, og siden dette er vert for et miljø, kan jeg enkelt og jevnlig redigere, med superforslagene. La oss gjøre det til et flott gratis plugin med ultimate brukeropplevelse i begge ender.