Tambahkan Kata Kunci Sorotan Pencarian ke Halaman Web Apa Pun dengan Mark.js

Sebagian besar browser memiliki Fungsionalitas CTRL + F untuk mencari dan menemukan apa pun yang dicari pengguna. Tapi, fitur ini tidak didukung di perangkat seluler dan itu tidak berfungsi dengan baik menggunakan teks dinamis.

Untungnya ada Mark.js, plugin JavaScript gratis yang menambahkan a sorot fitur pencarian ke halaman mana saja dengan mudah.

Secara default, ini berfungsi sebagai Plugin vanilla JS tapi bisa juga lari di atas jQuery. Ini adalah proyek open-source sepenuhnya, jadi Anda bebas untuk menggunakan ini di situs web komersial atau sebaliknya.

Ini berfungsi seperti halnya fitur pencarian browser, kecuali ia datang dengan barang tambahan. Anda dapat menambahkan filter khusus Anda sendiri dan mencari kata berdasarkan ekspresi reguler, sinonim spesifik, dan bahkan di elemen halaman dinamis seperti iframe.

Untuk memulai, cukup unduh file Mark.js dari GitHub atau host file tersebut melalui CDN untuk menghemat waktu.

Anda harus menjalankan fungsi ini terhubung ke bidang input di halaman. Dengan cara ini pengguna dapat memasukkan istilah pencarian dan dapatkan umpan balik segera melalui teks yang disorot.

Ini a cuplikan sampel dari halaman demo:

 $ (". context"). tandai (kata kunci [, opsi]); 

Itu .konteks target kelas dimanapun fungsi seharusnya mencari istilah. Anda mungkin menggunakan HTML default elemen jika Anda mencoba mencari seluruh halaman, atau Anda bisa lulus banyak elemen seperti berbagai widget tab atau iframe.

Lalu, di dalam menandai() berfungsi Anda lulus kata kunci, bersama dengan opsi (jika Anda mau).

Jika Anda membiarkan pengguna mengetikkan kata kunci maka Anda bisa perbarui fungsi secara otomatis dengan kata kunci baru setelah setiap penekanan tombol. Bahkan ada fungsi khusus untuk menargetkan acara ini.

Mark.js bekerja dengan semua browser utama, termasuk Chrome, Firefox, Opera (v12 +), dan Internet Explorer (9+). Sangat mudah untuk diatur jika Anda mengikuti dokumen dan menggunakan file terbaru.

Tapi, kalau mau lihat Mark.js sedang beraksi intip di biola di bawah menggunakan demo jQuery yang sangat mendasar untuk mencari beberapa paragraf dari Lorem Ipsum.