Įtraukite paieškos raktinį žodį į bet kurį tinklalapį su Mark.js

Dauguma naršyklių turi CTRL + F funkcijos ieškoti ir rasti, ką naudotojas ieško. Tačiau ši funkcija nėra palaikomas mobiliuosiuose įrenginiuose ir dinamiškas tekstas neveikia gerai.

Laimei, ten yra Mark.js, nemokamą „JavaScript“ papildinį, kuris prideda a paryškinkite paieškos funkciją lengvai į bet kurį puslapį.

Pagal numatytuosius nustatymus jis veikia kaip a vanilės JS įskiepis bet taip pat gali veikti ant jQuery. Tai visiškai atviro kodo projektas, todėl jūs galite laisvai tai naudoti bet kurioje komercinėje ar kitoje svetainėje.

Jis veikia panašiai kaip bet kokia naršyklės paieškos funkcija, išskyrus tai, kad jame yra papildomų gėrybių. Galite pridėti savo pritaikytus filtrus ir ieškokite žodžių pagal reguliarios išraiškos, konkrečius sinonimus, ir netgi dinaminiai puslapių elementai pvz., iframes.

Norėdami pradėti, atsisiųskite failą „Mark.js“ iš GitHub arba priegloba per CDN taupyti laiką.

Turėtumėte paleisti šią funkciją prijungtas prie įvesties lauko puslapyje. Tokiu būdu vartotojai gali įvesti paieškos terminus ir gauti tiesioginį atsiliepimą per pažymėtą tekstą.

Štai a mėginio fragmentas iš demonstracinio puslapio:

 $ („. kontekstas“). Ženklas (raktinis žodis [, parinktys]); 

The .kontekste klasės tikslai visur, kur tai turėtų būti ieškoti terminų. Galite naudoti numatytasis HTML elementas jei bandote ieškoti visame puslapyje, arba galite pereiti daug elementų pvz., skirtingi skirtukų valdikliai arba „iframes“.

Tada viduje ženklas() funkcija jums perduoti raktinį žodį, kartu su pasirinktimis (jei norite).

Jei leisite vartotojams įvesti raktinį žodį, galite automatiškai atnaujinti funkciją po kiekvieno rakto paspaudimo. Yra netgi konkreti funkcija, skirta šiam įvykiui nukreipti.

Mark.js veikia su visomis pagrindinėmis naršyklėmis, „Chrome“, „Firefox“, „Opera“ (v12 +) ir „Internet Explorer“ (9+). Tai lengva nustatyti, jei laikotės dokumentų ir naudojate naujausius failus.

Bet jei norite pamatyti Mark.js veikia pažvelgti į žemiau naudojant labai paprastą „jQuery“ demonstraciją, kad galėtumėte ieškoti kelių Lorem Ipsum dalių.