Lisage Mark.js-iga suvalisele veebilehele otsingu märksõna esiletõstmine

Enamikul brauseritel on Funktsioon CTRL + F otsida ja leida, mida kasutaja otsib. Aga see funktsioon mobiilseadmetes seda ei toetata ja see ei tööta dünaamilise teksti abil.

Õnneks on olemas Mark.js, tasuta JavaScript-plugin, mis lisab a esile otsingufunktsioon igale lehele kergesti.

Vaikimisi toimib see kui vanilli JS plugin kuid saab ka käivitada JQuery peal. See on täiesti avatud lähtekoodiga projekt, nii et te võite seda kasutada mis tahes veebisaidil, mis on kaubanduslik või muul viisil.

See toimib sarnaselt mis tahes brauseri otsingufunktsiooniga, välja arvatud lisaväärtustega. Saate lisada oma kohandatud filtrid ja otsige sõnu, mis põhinevad regulaaravaldised, konkreetsed sünonüümid, ja isegi sisse dünaamilised leheküljeelemendid näiteks iframes.

Alustamiseks laadige lihtsalt üles fail Mark.js GitHubilt või võõrustada faili läbi CDN aja säästmiseks.

Sa peaksid seda funktsiooni kasutama ühendatud sisendväljaga lehel. Nii saavad kasutajad sisestada otsingusõnad ja saada kohest tagasisidet esiletõstetud teksti kaudu.

Siin on a proovi fragment demo lehelt:

 $ (". kontekst"). märk (märksõna [, valikud]); 

The .Sisu klassi sihtmärke, olenemata sellest, kus funktsioon peaks otsige termineid. Võite kasutada vaikimisi HTML element kui üritate kogu lehekülge otsida või kui sa suudad seda teha mitu elementi näiteks erinevate vahekaartidega vidinad või iframes.

Siis, sees märk () funktsioneerima edastada märksõna, koos võimalustega (kui soovite).

Kui lasete kasutajatel sisestada märksõna, siis saate seda teha funktsiooni automaatne värskendamine uue võtmesõnaga pärast iga klahvivajutust. Selle sündmuse sihtimiseks on isegi teatud funktsioon.

Mark.js töötab kõigi suuremate brauseritega, sealhulgas Chrome, Firefox, Opera (v12 +) ja Internet Explorer (9+). See on tõesti lihtne seadistada, kui te järgite dokumente ja kasutate uusimaid faile.

Aga kui sa tahad seda näha Mark.js toimib võtke pilku allpool kasutades väga lihtsaid jQuery demoid, et otsida mõningaid Lorem Ipsumi lõike.