Adăugați Căutarea cuvântului cheie Highlighting to Any Webpage cu Mark.js

Majoritatea browserelor au Funcțiile CTRL + F pentru a căuta și a găsi ce caută utilizatorul. Dar, această caracteristică nu este acceptată pe dispozitivele mobile și nu funcționează bine folosind text dinamic.

Din fericire, există Mark.js, un plugin JavaScript gratuit care adaugă a evidențiați caracteristica de căutare la orice pagină cu ușurință.

Implicit, funcționează ca o vanilie JS plugin dar poate, de asemenea, să ruleze pe partea de sus a jQuery. Este un proiect complet open-source, deci aveți libertatea de a utiliza acest lucru pe orice site comercial sau altfel.

Funcționează la fel ca orice caracteristică de căutare a browserului, cu excepția cazului în care acesta este prevăzut cu bonusuri suplimentare. Poti sa adaugi propriile filtre personalizate și căutați cuvinte bazate pe expresii obisnuite, sinonime specifice, și chiar în elemente dinamice ale paginii cum ar fi cadrele iframe.

Pentru a începe, descărcați fișierul Mark.js de la GitHub sau găzduiți fișierul printr-un CDN pentru a salva timp.

Ar trebui să executați această funcție conectat la un câmp de intrare pe pagină. Astfel, utilizatorii pot introduce termenii de căutare și primi feedback imediat prin text evidențiat.

Iată a fragment de încercare de pe pagina demo:

 $ (". context"). marca (cuvântul cheie [, opțiuni]); 

.context țintele de clasă oriunde ar trebui funcția căutați termeni. S-ar putea să utilizați implicit HTML element dacă încercați să căutați întreaga pagină sau puteți trece mai multe elemente cum ar fi diferite widget-uri tab-uri sau iframe.

Apoi, în interiorul marcă() funcționează treceți cuvântul cheie, împreună cu opțiunile (dacă doriți).

Dacă permiteți utilizatorilor să introducă un cuvânt cheie, atunci puteți actualizați automat funcția cu un cuvânt cheie nou după fiecare apăsare de tastă. Există chiar și o funcție specifică pentru a viza acest eveniment.

Mark.js funcționează cu toate browserele importante, inclusiv Chrome, Firefox, Opera (v12 +) și Internet Explorer (9+). Este foarte ușor să configurați dacă urmați docs-urile și utilizați cele mai noi fișiere.

Dar, dacă vrei să vezi Mark.js în acțiune arunca o privire la viraj mai jos folosind un demo foarte simplu jQuery pentru a căuta câteva paragrafe din Lorem Ipsum.