Aggiungi l'evidenziazione della parola chiave di ricerca a qualsiasi pagina web con Mark.js
La maggior parte dei browser ha il CTRL + F funzionalità per cercare e trovare ciò che l'utente sta cercando. Ma questa caratteristica non è supportato su dispositivi mobili e non funziona bene usando il testo dinamico.
Fortunatamente, c'è Mark.js, un plugin JavaScript gratuito che aggiunge un evidenzia la funzionalità di ricerca a qualsiasi pagina con facilità.
Di default, funziona come un plug-in JS vanilla ma può anche funzionare in cima a jQuery. È un progetto completamente open source, quindi sei libero di utilizzarlo su qualsiasi sito web commerciale o in altro modo.
Funziona in modo molto simile a qualsiasi funzione di ricerca del browser, tranne che viene fornito con extra extra. Puoi aggiungere i tuoi filtri personalizzati e cerca parole basate su espressioni regolari, sinonimi specifici, e anche dentro elementi di pagina dinamici come iframe.
Per iniziare, scarica il file Mark.js da GitHub o ospitare il file attraverso un CDN risparmiare tempo.
Dovresti eseguire questa funzione collegato a un campo di input sulla pagina. In questo modo gli utenti possono inserire i termini di ricerca e ottenere un feedback immediato tramite testo evidenziato.
Ecco un sample snippet dalla pagina demo:
$ (". context"). mark (keyword [, options]); Il .contesto obiettivi di classe ovunque la funzione dovrebbe cerca termini. Potresti usare il HTML predefinito elemento se stai cercando di cercare l'intera pagina o potresti passare più elementi come diversi widget a schede o iframe.
Quindi, all'interno del marchio() ti funzione passare la parola chiave, insieme alle opzioni (se lo desideri).
Se permetti agli utenti di digitare una parola chiave, puoi farlo aggiorna automaticamente la funzione con una nuova parola chiave dopo ogni pressione di un tasto. C'è anche una funzione specifica per indirizzare questo evento.
Mark.js funziona con tutti i principali browser, tra cui Chrome, Firefox, Opera (v12 +) e Internet Explorer (9+). È davvero facile da configurare se si seguono i documenti e si utilizzano i file più recenti.
Ma se vuoi vedere Mark.js in azione dare un'occhiata al violino sotto utilizzando una demo jQuery molto semplice per cercare alcuni paragrafi di Lorem Ipsum.
