Tilføj Søgeord Fremhævning til enhver webside med Mark.js
De fleste browsere har CTRL + F funktionalitet at søge og finde, hvad brugeren søger. Men denne funktion understøttes ikke på mobile enheder og det virker ikke godt ved hjælp af dynamisk tekst.
Heldigvis er der Mark.js, et gratis JavaScript plugin, der tilføjer en fremhæv søgefunktion til enhver side med lethed.
Som standard fungerer det som en Vanilla JS plugin men kan også løbe på toppen af jQuery. Det er et helt open source-projekt, så du er fri til at bruge dette på enhver hjemmeside kommerciel eller på anden måde.
Det virker meget som enhver browser søgning funktion, medmindre det kommer med ekstra godbidder. Du kan tilføje Dine egne brugerdefinerede filtre og søge efter ord baseret på regulære udtryk, specifikke synonymer, og endda i dynamiske sideelementer såsom iframes.
For at komme i gang skal du bare downloade Mark.js-filen fra GitHub eller værten for filen gennem en CDN for at spare tid.
Du bør køre denne funktion forbundet til et inputfelt på siden. På denne måde kan brugerne indtaste søgeord og få øjeblikkelig feedback via fremhævet tekst.
Her er en prøveuddrag fra demosiden:
$ (". kontekst"). mark (søgeord [, valgmuligheder]); Det .sammenhæng klasse mål, hvor funktionen skal søge efter udtryk. Du kan muligvis bruge standard HTML element hvis du forsøger at søge hele siden, eller du kan bestå flere elementer f.eks. forskellige tabbed widgets eller iframes.
Derefter inde i mærke() funktion dig send søgeordet, sammen med mulighederne (hvis du ønsker det).
Hvis du lader brugerne indtaste et søgeord, så kan du Auto-opdater funktionen med et nyt søgeord efter hver tastetryk. Der er endda en specifik funktion til at målrette mod denne begivenhed.
Mark.js fungerer sammen med alle større browsere, herunder Chrome, Firefox, Opera (v12 +) og Internet Explorer (9+). Det er virkelig nemt at konfigurere, hvis du følger docs og bruger de nyeste filer.
Men hvis du vil se Mark.js i aktion tag et kig på fiddle nedenfor ved hjælp af en meget grundlæggende jQuery-demo for at søge et par stykker af Lorem Ipsum.
