FoxyComplete - pokročilé automatické vyhledávání s obrázky
Dnes budu sdílet trendovou funkcionalitu, kterou jsem v projektech realizovala už nějakou dobu.
Nazývám to "FoxyComplete" a to, co dělá, je načíst výsledky hledání, které lze kliknout, spolu s obrázky, které jsou buď automaticky oškrábány z obsahu výsledku nebo z určitého souboru. Je snadné jej implementovat a jednou provést, snadno se vyladit.
Aplikace této funkce závisí výhradně na přednosti návrhářů a vývojářů, ale její vliv na zkušenosti uživatelů z něj dělá nejlepší volbu pro přidání do moderních návrhových a vývojových projektů.
Obchodní jednotky, kde jsem tuto funkci využil osobně, jsou elektronický obchod, firemní design, fotografie, zábava a budoucí projekty, které vyžadují komplexní vyhledávací funkci.
Jsem si jist, že jste všichni navštívili IMDb a Jablko webové stránky a vyzkoušela jejich vyhledávací funkce. Pokud tomu tak není, je náhled toho, jak vypadá jejich funkce pokročilého vyhledávání.
Všichni víme, že to lze udělat, ale otázka zní: "Proč se to obvykle nerobí ve všech těch krásně vytvořených webových stránkách?" No, myslím, že je to pravděpodobně nedostatek rychlého a otevřeného řešení!
Když jsem provedl stejné Automatické vyhledávání s obrázky na mém Fotografický blog který jsem před chvílí navrhl, bylo to jistě složité, ale nakonec to bylo skvělé. Návštěvníci mého blogu si skutečně rádi prohlíží mojí galerii obrázků a okamžitě si ukážou, co budou vidět.
Níže je náhled funkce vyhledávání na mém blogu .
V tomto tutoriálu se budu zabývat níže uvedenými body
- Stručný přehled skriptu
- FoxyComplete jako doplněk WordPress (lokální / dynamický)
- Implementace FoxyComplete jako vyhledávání Youtube se snímky
- Zlepšení zabezpečení
Pro návrháře WordPress je to dort a pro vývojáře WordPress / PHP - je to velká příležitost prozkoumat jeho četné funkce a aplikace, které nabízí. Pro pokročilou implementaci by požadavky byly základní znalost WordPress, PHP, HTML, jQuery a CSS.
Stručný přehled skriptu
Umožňuje nejprve rychle vzít plíživý vrchol k tomu, co budeme vytvářet v tomto tutoriálu. Klikněte na níže uvedený obrázek a základní demo .
Mějte prosím na paměti, udržuji tento tutoriál na velmi základní úrovni, aby se ujistil, že to každý rozumí a že ho někdo může navrhnout nebo vyladit podle svých požadavků. Funkce, kterou jsem udělala, byla inspirována jQuery Autocomplete Plugin od Jorna Zaefferera.
Uvedený rychlý příklad automaticky doplňuje název výsledku, ale můžeme ho rovněž vyladit tak, aby přesměroval na adresu URL na vybranou (provedenou v další části). ID vyhledávacího pole se ponechává jako "s", což je výchozí hodnota používaná pro vyhledávací pole WordPress (bylo by prospěšné, pokud budeme pokračovat v této koncepci dále rozvíjet modul WordPress Plugin).
Stylování výsledků je snadné: je vyrobeno z čisté konstrukce, která je snadno přizpůsobitelná vašemu designu.
.ac_results -> .ac_results ul -> .ac_results ul li -> .ac_results ul li a -> .ac_results ul li a img a .ac_results ul li a span
Tento základní příklad používá statický zdroj dat, což je jednoduchý soubor JavaScript, ve kterém jsme deklarovali pole ve formátu JSON. Všechna naše funkce jsou analyzovat pole a zobrazovat výsledky.
Nedělejte si starosti - je to jen základní pole klíčové a hodnotové páry a nic víc než to. Naše klíče jsou trvalé, které nás přivádí k výsledkové stránce, obrazu k náhledu a titulu, ve kterém musíme hledat řetězec. Zachoval jsem výchozí obrázek a ukázkový název pro toto základní demo.
Příklad struktury pole
[{“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]Funkce JavaScriptu je snadná. Právě analyzujeme výsledek JSON Array v jQuery, formátujeme výsledky podle našich požadavků a předáme je.
Tip pro vývojáře: V případě, že chcete změnit způsob zobrazování výsledků, podívejte se na formát funkce () ve skriptu foxycomplete.js. Jedná se o funkci JavaScript, která vezme pole jako vstup a vrátí formátovaný HTML obsahující prvky pole. Docela základní pochopit, ale pokud chcete změnit, udělejte to!
FoxyComplete jako plugin pro WordPress (lokální / dynamický)
Klepnutím na níže uvedený obrázek stáhněte plugin WordPress jako soubor ZIP.
Pro návrháře
Doufám, že si vzpomínáte, že jsem řekl, že to má být dort pro návrháře, no, tady to je! FoxyComplete jako Plug-n-Play WordPress Plugin který pracuje přímo z krabice - pro základní implementaci je zapotřebí jednoduchá konfigurace. Jediné, co musíte udělat, je stáhnout, nainstalovat a hrát, zatímco vy navrhnete.
Možnosti pluginu jsou následující:
Povolit místní vyhledávání: Po procházení několika webových stránek jsem zjistil, že jejich vyhledávací volba byla neuvěřitelně rychlá - dokonce i s obrovskou databází - například IMDB. První věc, která zasáhla jejich pokročilé rychlé servery - ale co běžní uživatelé, kteří mají sdílený hosting a různá množství dat? To je důvod, proč jsem lokální vyhledávání prioritou. Jednoduše načte soubor JavaScript do zápatí vaší instalace WordPress obsahující pole všech vašich příspěvků a stránek spolu s jejich adresami URL a pokud jsou nalezeny, náhledy obrázků. Záložka je výchozí k dynamickému vyhledávání, přestože ho můžete kdykoli změnit na místní vyhledávání.
Limit: Jeden jistý by potřeboval kontrolu nad limitem zobrazených výsledků. Pomáhá udržovat soulad s návrhem a umožňuje uživatelům získat jen ty nejvýznamnější výsledky. Výchozí hodnota je pět nejlepších relevantních výsledků.
Šířka automatického dokončování: Původně byla vždy stejná jako šířka vstupu, ale pak jsem si uvědomil, že neprocházíme ve vyhledávacím poli ve stylu Google. Je stále výchozí na šířku vstupního prvku, ale můžete jej kdykoli změnit.
ID vstupu: Jelikož se jedná o doplněk WordPress, dal jsem přednost "#s" jako výchozí volbě, která může být změněna na co chcete. Stačí zadat ID (bez "#") požadovaného vstupního prvku a je to jít.
Výchozí obrázek: někdy plugin nenajde relevantní obrázek, a proto jsem do něj zahrnul ukázkový obrázek, ale máte i nad ním kontrolu: stačí ho nahradit vlastním ukázkovým obrázkem v adresáři pluginů.
Dynamické vyhledávání hledá inteligentně relevantní obsah a okamžitě dodává dynamické pole JSON. Nejprve shromažďuje všechny příspěvky a stránky v aplikaci WordPress, které jsou zveřejněny a zveřejněny. Pak vyhledává obrázky ve 3 krocích od obsahu jako:
- Odesílání médií
- "Vlastní pole" "Thumbnail"
- Obrázky v příspěvkovém obsahu
Jakmile má všechna data, spojuje název a příslušný obsah každého příspěvku / stránky a vyhledává dotazovanou položku pro komplexní vyhledávání. Poté, co jsme zjistili, řekněme, že X počet položek - tlačí tyto X na pole JSON, které se vrátí do funkce JavaScript.
Dynamická versus místní funkce
To je kritické téma a jsem otevřený pro diskusi v sekci komentáře. Osobně se domnívám, že neexistuje žádná škoda, která by místním zdrojům poskytla, pokud by to zlepšilo zážitky mnoha záhybů. Dalším důvodem, proč jsem provedl vyhledávání Místní vyhledávání, bylo to, že jsem našel dokonce Google, který jej implementoval v Gmailu.
Jakmile se uživatel přihlásí, služba Gmail pošle na server svůj požadavek a naplní všechny e-mailové adresy a jména nebo aliasy všech vašich kontaktů do zápatí, které se pak používají pro pole automatického doplnění To, CC, BCC a Labels. Co říkáte, legitimní?
Implementace FoxyComplete jako vyhledávání ve formátu YouTube s obrázky
Jak bylo uvedeno výše, pro vývojáře je také spousta funkcí. Nahoře je to, co jsme použili pomocí kanálů YouTube a poté je analyzovali v PHP, abychom získali požadované výsledky ve formátu JSON. Můžete se o nich dozvědět tady . Klikněte na obrázek níže pro demo vyhledávání služby Foxycomplete YouTube.
Další funkce, kterou můžete udělat, je vyhledávač YouTube s možností přehrávání na modu nebo překryv. Když například vyhledáte video a kliknete na něj v výsledcích automatického dokončování, objeví se v něm otevřené modální dialogové okno nebo překryvné přehrávání videa, které se bude přehrávat na vašem webu, ale bude pocházet z YouTube. Pěkný, že?
Zlepšení bezpečnosti
Přestože plugin WordPress je bezpečný, jak jsem použil WordPress Nounces , lze ji dokonce zabezpečit pomocí konstant dynamické verze a šifrování v lokální síti.
Jedním z bezpečnostních opatření, která jsme použili, bylo zkontrolovat volání v Ajaxu a poté zkontrolovat i volání v Ajaxu ze stejné domény, jak je uvedeno níže.
//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}To je jen jeden z mnoha způsobů, jak ji zajistit!
Závěr
Takže to byl FoxyComplete, který by mohl v budoucnu pomoct ve vašich projektových a vývojových projektech. Jedná se o verzi 1.0 a zajistím, že ji budeme dále zlepšovat s vaší cennou zpětnou vazbou a podporou.
Dejte mi vědět, co si myslíte v sekci komentáře níže a protože je hostováno na prostředí, které můžu snadno a pravidelně upravovat, se svými super návrhy - dovolte, aby to byl skvělý bezplatný plugin s konečným uživatelským zážitkem na obou koncích.