Přidat Vyhledávání klíčových slov Zvýraznění na libovolnou webovou stránku s Mark.js

Většina prohlížečů má Funkce CTRL + F vyhledávat a hledat vše, co uživatel hledá. Ale tato funkce není podporováno v mobilních zařízeních a dynamický text nefunguje dobře.

Naštěstí je tu Mark.js, bezplatný plugin pro JavaScript, který přidává a zvýrazněte vyhledávací funkci na libovolnou stránku s lehkostí.

Ve výchozím nastavení funguje jako vanilla JS plugin ale může také běžet na vrcholu jQuery. Je to zcela open-source projekt, takže ho můžete používat na libovolné komerční nebo jiné webové stránce.

Funguje to podobně jako každý vyhledávací funkce prohlížeče, kromě toho, že přichází s extra dobroty. Můžeš přidat vlastní filtry a hledat slova na základě regulárních výrazů, specifická synonyma, a dokonce v dynamické prvky stránky například iframes.

Chcete-li začít, stáhněte si soubor Mark.js od společnosti GitHub nebo hostit soubor prostřednictvím CDN šetří čas.

Tuto funkci byste měli spustit připojeno k vstupnímu poli na stránce. Uživatelé tak mohou zadávat vyhledávací výrazy a získat okamžitou zpětnou vazbu přes zvýrazněný text.

Tady je ukázkový úryvek z demo stránky:

 $ (".text"). mark (klíčové slovo [, možnosti]); 

.kontext třídit cíle, kdekoli by funkce měla hledat výrazy. Můžete použít výchozí HTML živel pokud se snažíte prohledat celou stránku nebo byste mohli projít více prvků například různé widgety s kartami nebo iframes.

Pak uvnitř označit() funguje předat klíčové slovo, spolu s možnostmi (pokud chcete).

Pokud necháte uživatele zadat klíčové slovo, můžete automatické aktualizace funkce s novým klíčovým slovem po každém stisknutí klávesy. Na tuto událost je možné zacílit i specifickou funkci.

Mark.js pracuje se všemi hlavními prohlížeči, včetně Chrome, Firefoxu, Opery (v12 +) a Internet Exploreru (9+). Je to opravdu snadné nastavit, pokud budete postupovat podle dokumentů a používat nejnovější soubory.

Ale pokud chcete vidět Mark.js v akci podívejte se na pod nohama pomocí velmi základní jQuery demo pro vyhledávání pár odstavců Lorem Ipsum.