Pievienojiet meklēšanas atslēgvārdu izcelšanu jebkurai tīmekļa lapai ar Mark.js

Vairumam pārlūkprogrammu ir Funkcijas CTRL + F meklēt un atrast visu, ko lietotājs meklē. Bet, šī funkcija netiek atbalstīta mobilajās ierīcēs un tas nedarbojas labi, izmantojot dinamisko tekstu.

Par laimi, tur ir Mark.js, bezmaksas JavaScript spraudnis, kas papildina a iezīmējiet meklēšanas funkciju uz jebkuru lapu ar vieglumu.

Pēc noklusējuma tas darbojas kā a vaniļas JS spraudnis bet var arī darboties virs jQuery. Tas ir pilnīgi atvērtā koda projekts, tāpēc jūs varat to izmantot jebkurā komerciālā vai citā tīmekļa vietnē.

Tas darbojas tāpat kā jebkura pārlūkprogrammas meklēšanas funkcija, izņemot to, ka tas nāk ar papildu labumiem. Jūs varat pievienot savus pielāgotos filtrus un meklējiet vārdus, kuru pamatā ir regulāras izteiksmes, konkrētiem sinonīmiem, un pat dinamiskie lapas elementi piemēram, iframes.

Lai sāktu darbu, vienkārši lejupielādējiet Mark.js failu no GitHub vai uzņemšanas failu izmantojot CDN lai ietaupītu laiku.

Jums vajadzētu palaist šo funkciju savienots ar ievades lauku lapā. Tādā veidā lietotāji var ievadīt meklēšanas vienumus un saņemt tūlītēju atgriezenisko saiti izmantojot izcelto tekstu.

Lūk, a parauga fragments no demo lapas:

 $ (". konteksts"). zīme (atslēgvārds [, opcijas]); 

The .kontekstā klases mērķi, lai kur tā būtu meklēt terminus. Jūs varat izmantot noklusējuma HTML elementu ja jūs mēģināt meklēt visu lapu, vai arī varat pāriet vairāki elementi piemēram, dažādas cilnes logrīki vai iframes.

Tad iekšpusē atzīmēt () darbojas jums iet atslēgvārdu, kopā ar opcijām (ja vēlaties).

Ja ļausit lietotājiem ievadīt atslēgvārdu, tad varat automātiski atjaunināt funkciju pēc katra atslēgas nospiešanas. Ir pat īpaša funkcija, lai mērķētu šo notikumu.

Mark.js darbojas ar visām galvenajām pārlūkprogrammām, ieskaitot Chrome, Firefox, Opera (v12 +) un Internet Explorer (9+). Tas ir reāli viegli uzstādīt, ja sekojat dokumentiem un izmantojat jaunākos failus.

Bet, ja vēlaties redzēt Mark.js darbībā uzlūkojiet zemāk izmantojot ļoti vienkāršu jQuery demo, lai meklētu dažus Lorem Ipsum punktus.