FoxyComplete - Advanced Autocomplete Leita með myndum
Í dag ætla ég að deila nýjustu tísku virkni sem ég hef unnið í verkefnum mínum um stund núna.
Ég kalla það "FoxyComplete" og það sem er er er að ná smellt leitarniðurstöðum ásamt myndum, annaðhvort sjálfkrafa skrapað úr innihaldi niðurstöðu eða tiltekins skráar. Það er auðvelt að framkvæma og einu sinni gert, auðvelt að klipa.
Umsókn um þessa virkni er eingöngu háð hönnuður og verktaki val en áhrif hennar á notendaviðmótið gerir það að besta vali til að bæta við í nútíma hönnun og þróunarverkefnum.
Viðskiptareiningar þar sem ég hef persónulega notað þessa virkni eru e-verslun, sameiginlegur hönnun, ljósmyndun, skemmtun og framtíðarverkefni sem krefjast alhliða leitaraðgerðar.
Ég er nokkuð viss um að þú hafir allir heimsótt IMDb og Apple vefsíður og reyndu leitaraðgerðir sínar. Ef ekki - hér að neðan er sýnishorn af því hvernig háþróaður leitarmöguleikinn lítur út.
Við vitum öll að það er hægt að gera en þá er spurningin: "Af hverju er það venjulega ekki gert á öllum þeim fallega iðnvænum vefsíðum?" Jæja, ég geri ráð fyrir að það sé líklega skortur á fljótlegan, lausan allan lausn!
Þegar ég lagði fram sömu Autocomplete Search með myndum yfir á minn Ljósmyndun Blog sem ég gerði fyrir löngu síðan, það var örugglega erfitt að ná, en á endanum kom það út frábært. Gestirnir á blogginu mínu njóta virkilega að leita í myndasafnið mitt og fá strax sýnishorn af því sem þeir munu sjá næst.
Hér að neðan er hvernig leitin á blogginu mínu lítur út.
Í þessari kennslu er ég að fara að ná yfir nefndum punktum
- Stutt yfirlit yfir handritið
- FoxyComplete sem WordPress Plugin (Local / Dynamic)
- Framkvæmd FoxyComplete sem Youtube leit með myndum
- Auka öryggi
Fyrir WordPress Hönnuðir , það er stykki af köku og fyrir WordPress / PHP Developers - það er frábært tækifæri til að kanna fjölmargar virkni og forrit sem það hefur að bjóða. Fyrir háþróaða framkvæmd, kröfurnar væri grunnþekking á WordPress, PHP, HTML, jQuery og CSS.
Stutt yfirlit yfir handritið
Leyfir okkur fyrst að fljúga hámarki hvað við munum búa í þessari kennsluefni. Vinsamlegast smelltu á myndina hér fyrir neðan fyrir undirstöðu kynningu .
Vinsamlegast hafðu í huga, ég er að halda þessari einkatími á mjög grunnatriðum til að tryggja að allir skilji það og hver sem er getur hannað eða klipið það í samræmi við kröfur þeirra. Virkni sem ég hef gert var innblásin af jQuery Autocomplete Tappi eftir Jorn Zaefferer.
Ofangreind fljótlegt dæmi fullnægir titlinum af niðurstöðum en við getum líka klipið það til að beina til slóðar á valið (gert í næsta kafla). Kennimerki leitarvélin er geymt sem "s", sem er sjálfgefið notað fyrir WordPress Search Field (væri gagnlegt þar sem við höldum áfram með þetta hugtak frekar til að þróa WordPress Plugin).
Stílhönnun niðurstaðna er auðvelt: það er byggt upp af hreinum uppbyggingu sem auðvelt er að stilla í samræmi við hönnunina.
.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
Þetta undirstöðu dæmi notar truflanir gagnagrunna sem er einföld JavaScript skrá þar sem við höfum lýst yfir fylki í JSON sniði. Öll virkni okkar er að flokka fylkið og birta niðurstöðurnar.
Ekki hafa áhyggjur - það er bara fylki með undirstöðu lykill og gildi pör og ekkert annað en það. Lyklar okkar eru leyfi til að taka okkur á niðurstöðusíðuna, mynd til að forskoða og titillinn þar sem við verðum að leita í strengnum. Ég hef geymt sjálfgefið mynd og dæmi um titil fyrir þessa undirstöðu kynningu.
Dæmi um array uppbyggingu
[{“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 virkni er auðvelt. Við flokka bara uppkomnar JSON Array í jQuery, sniðið niðurstöðurnar í samræmi við kröfur okkar og framhjá því.
Ábending fyrir hönnuði: Ef þú ert að leita að breyta því hvernig niðurstöðurnar eru sýndar, skoðaðu aðgerðarsniðið () í handritinu foxycomplete.js. Það er JavaScript-aðgerð sem tekur fylki sem inntak og skilar sniðið HTML sem inniheldur þætti í fylkinu. Nokkuð undirstöðu að skilja en ef þú ert að leita að breyta því-gerðu það hér!
FoxyComplete sem WordPress tappi (staðbundin / dynamic)
Smelltu á myndina hér fyrir neðan til að hlaða niður WordPress Plugin sem .zip-skrá.
Fyrir hönnuði
Ég vona að þú manst eftir því að ég ætlaði að vera stykki af köku fyrir hönnuði, jæja, hér er það! FoxyComplete sem Plug-n-Play WordPress Plugin Það virkar beint út úr reitnum - bara einfalt stillingar er nauðsynlegt fyrir grunnuppfærslu. Allt sem þú þarft að gera er að hlaða niður því, setja það upp og leika í kringum meðan þú hakar fyrir það.
Tappi Valkostir eru eins og hér að neðan:
Virkja staðbundna leit: Eftir að hafa skoðað nokkrar vefsíður fann ég að leitavalkosturinn þeirra var ótrúlega fljótur - jafnvel með miklum gagnagrunni, td IMDB. The fyrstur hlutur sem slegið var háþróaður fljótur þeirra framreiðslumaður-en hvað um venjulegur notandi sem hefur deilt hýsingu og fjölbreytt magn af gögnum? Þess vegna gerði ég staðbundin leit að forgangsrétti. Það hleðst einfaldlega JavaScript-skrá í fótspor WordPress uppsetningarins þíns sem inniheldur fylki til allra innlegga og síðna ásamt vefslóðum þeirra og, ef það finnst, forsýning mynda. Tappi er sjálfgefið að leita en þú getur breytt því hvenær sem er til staðbundinnar leitar.
Takmark: Einhver þarf að hafa stjórn á mörkum niðurstaðna. Það hjálpar að halda samræmi við hönnunina og leyfa notendum að fá aðeins viðeigandi niðurstöður. Það er að jafnaði fimm bestu niðurstöður.
Breidd Autocomplete: Upphaflega var það alltaf haldið jafnt við breidd inntaksins en þá áttaði ég mig á því að við leitum ekki á Google-stækkandi leitarreit. Það vantar ennþá breidd inntakslagsins en þú getur breytt því hvenær sem er.
Auðkenni inntaksins: Þar sem það er WordPress Plugin, gaf ég val á "#s" sem sjálfgefið val sem hægt er að breyta í hvað sem þú vilt. Sláðu bara inn auðkennið (án '#') viðkomandi innsláttarþáttar þíns og það er farið.
Sjálfgefin mynd: Stundum finnst tappi ekki að finna viðeigandi mynd og því að ég hef tekið þátt í demo mynd, en þú hefur líka stjórn á því: Bara skipta um það með eigin sýnishornsmynd þinni í tappi möppunni.
Dynamic Search leitar að viðeigandi efni á greindan hátt og veitir dynamic JSON array til virkni strax. Fyrst safnar það öllum innleggum og síðum í WordPress uppsetningunni sem er birt og opinber. Þá leitar það myndirnar í 3 skrefum frá innihaldi sem:
- Media Uploads
- "Thumbnail" Custom Field
- Myndir í póstinn
Þegar það hefur öll gögnin sameinar það titilinn og viðkomandi innihald hvers pósts / síðu og leitar eftir fyrirspurninni fyrir alhliða leitarreynslu. Einu sinni fundust, segjum X fjölda atriða-það ýtir þeim X er á JSON array, sem er skilað til JavaScript virkni.
Dynamic vs staðbundin virkni
Þetta er mikilvægt atriði og ég er opin til umfjöllunar í athugasemdarsviðinu. Mér finnst persónulega að það sé enginn skaði sem gefur þeim staðbundna uppsprettu ef það eykur reynslu margra brjóta saman. Önnur ástæða þess að ég lagði staðbundna leitina var vegna þess að ég fann jafnvel Google að framkvæma það í Gmail.
Þegar notandinn hefur skráð þig inn sendir Gmail beiðni á netþjóninn og sækir öll netföng og nöfn eða nafnalista allra tengiliða í fótsporið sem síðan er notað til reitanna Til, CC, BCC og Merkingar. Hvað segir þú, lögmæt?
Innleiða FoxyComplete sem YouTube-eins og leit með myndum
Eins og áður hefur komið fram er mikið af virkni fyrir forritara líka. Ofangreind er það sem við gerðum með því að nota YouTube straumar og síðan flokka þær í PHP til að gefa nauðsynlegar niðurstöður í JSON sniði. Þú getur lært um þau hér . Smelltu á myndina hér fyrir neðan til kynningar á YouTube Foxycomplete Search.
Önnur virkni sem þú getur búið til er YouTube leitarvélin með smella á spilun í formi eða yfirlagi. Til dæmis, þegar þú leitar að myndskeiði og smellir á það í sjálfvirkri niðurstöðum birtist það opna snjallsamtal eða yfirborð með myndskeiðinu í henni, spilað á vefsvæðinu þínu en fengið frá YouTube. Nice, er það ekki?
Auka öryggi
Þó að WordPress tappi sé öruggur eins og ég notaði WordPress Nounces , það er hægt að gera jafnvel öruggt með því að nota fasta í dynamic útgáfu og dulkóðun á staðnum.
Ein öryggisráðstöfun sem við notuðum var að leita að Ajax símtali og þá einnig að leita að Ajax símtali frá sama léni eins og sýnt er að neðan.
//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}Það er bara ein af mörgum leiðum til að tryggja það!
Niðurstaða
Svo var það FoxyComplete sem gæti hjálpað þér mikið í hönnun og þróunarverkefnum í framtíðinni. Þetta er útgáfa 1.0 og ég mun tryggja að halda áfram að bæta það með verðmæta endurgjöf og stuðning.
Láttu mig vita hvað þér finnst í athugasemdunum hér að neðan og þar sem þetta er hýst í umhverfi sem ég get auðveldlega og reglulega breytt með frábærum uppástungum þínum, leyfum þér að gera það frábæran ókeypis viðbót með fullkomnu notendavandanum í báðum endum.