Dodajte isticanje ključne riječi pretraživanja bilo kojoj web-stranici pomoću oznake Mark.js

Većina preglednika ima CTRL + F funkcionalnost pretraživati ​​i pronaći ono što korisnik traži. No, ova značajka nije podržan na mobilnim uređajima i ne radi dobro pomoću dinamičkog teksta.

Srećom, tu je Mark.js, besplatni JavaScript dodatak koji dodaje a označite značajku pretraživanja na bilo koju stranicu s lakoćom.

Prema zadanim postavkama radi kao vanilla JS dodatak ali i pokrenuti na vrhu jQuery. To je projekt otvorenog koda, tako da ga možete koristiti na bilo kojoj web-lokaciji ili nekom drugom.

Djeluje vrlo slično bilo kojoj značajki pretraživanja pretraživača, osim što dolazi s dodatnim dodatcima. Možete dodati vlastite prilagođene filtre i tražiti riječi na temelju regularni izrazi, specifični sinonimi, pa čak i unutra dinamički elementi stranice kao što su iframes.

Da biste započeli, jednostavno preuzmite datoteku Mark.js od GitHub ili domaćin datoteke preko CDN-a za uštedu vremena.

Trebali biste pokrenuti ovu funkciju spojen na polje za unos na stranici. Na taj način korisnici mogu unijeti pojmove za pretraživanje i dobiti neposrednu povratnu informaciju putem označenog teksta.

Evo jednog isječak uzorka s demo stranice:

 $ (". kontekst"). oznaka (ključna riječ [, opcije]); 

.kontekst ciljne klase gdje god funkcija trebala tražiti pojmove. Možete upotrijebiti zadani HTML element ako pokušavate pretražiti cijelu stranicu ili možete proći više elemenata kao što su različiti widgeti s karticama ili iframe.

Zatim, unutar oznaka () funkcionira proslijediti ključnu riječ, zajedno s opcijama (ako želite).

Ako dopustite korisnicima da unesu ključnu riječ, možete automatsko ažuriranje funkcije s novom ključnom riječi nakon svakog pritiska na tipku. Postoji čak i određena funkcija za ciljanje ovog događaja.

Mark.js radi sa svim većim preglednicima, uključujući Chrome, Firefox, Opera (v12 +) i Internet Explorer (9+). Stvarno je lako postaviti ako slijedite dokumente i koristite najnovije datoteke.

Ali, ako želite vidjeti Mark.js u akciji zavirite u gusak ispod koristeći vrlo osnovni demo jQuery za pretraživanje nekoliko odlomaka Lorem Ipsuma.