Legg til søkeord Fremhever til hvilken som helst nettside med Mark.js
De fleste nettlesere har CTRL + F-funksjonalitet å søke og finne hva brukeren ser etter. Men denne funksjonen støttes ikke på mobile enheter og det fungerer ikke bra med dynamisk tekst.
Heldigvis er det Mark.js, et gratis JavaScript-plugin som legger til en utheve søkefunksjonen til enhver side med letthet.
Som standard fungerer det som en Vanilla JS plugin men kan også løpe på toppen av jQuery. Det er et helt åpen kildekode-prosjekt, så du er fri til å bruke dette på en hvilken som helst nettside kommersiell eller på annen måte.
Det fungerer mye som enhver nettlesersøkfunksjon, bortsett fra at den kommer med ekstra godbiter. Du kan legge til dine egne tilpassede filtre og søke etter ord basert på vanlig uttrykk, spesifikke synonymer, og til og med i dynamiske sideelementer som iframes.
For å komme i gang, bare last ned Mark.js-filen fra GitHub eller vert for filen gjennom en CDN å spare tid.
Du bør kjøre denne funksjonen koblet til et inngangsfelt på siden. På denne måten kan brukerne legge inn søkeord og få umiddelbar tilbakemelding via markert tekst.
Her er en prøveutdrag fra demonstrasiden:
$ (". kontekst") .merke (søkeord [, alternativer]); De .kontekst klassemål hvor funksjonen skal søk etter vilkår. Du kan bruke standard HTML element hvis du prøver å søke hele siden, eller du kan passere flere elementer for eksempel forskjellige tabbed widgets eller iframes.
Deretter inne i merke() Fungerer deg send søkeordet, sammen med alternativene (hvis du ønsker det).
Hvis du lar brukerne skrive inn et søkeord, så kan du automatisk oppdatering av funksjonen med et nytt søkeord etter hvert tastetrykk. Det er enda en bestemt funksjon å målrette mot denne hendelsen.
Mark.js Fungerer med alle de store nettleserne, inkludert Chrome, Firefox, Opera (v12 +) og Internet Explorer (9+). Det er veldig enkelt å sette opp hvis du følger dokumentene og bruker de nyeste filene.
Men hvis du vil se Mark.js i aksjon ta en titt på fiolin under bruker en veldig grunnleggende jQuery-demo for å søke noen få stykker av Lorem Ipsum.
