Tambah Kata kunci Carian yang Sorotan ke Sebarang Laman Web dengan Mark.js

Kebanyakan penyemak imbas mempunyai Fungsi CTRL + F untuk mencari dan mencari apa yang pengguna cari. Tetapi, ciri ini tidak disokong pada peranti mudah alih dan ia tidak berfungsi dengan baik menggunakan teks dinamik.

Nasib baik, ada Mark.js, plugin JavaScript percuma yang menambah sorot ciri carian ke mana-mana halaman dengan mudah.

Secara lalai, ia berfungsi sebagai plugin JS vanilla tetapi juga boleh dijalankan di atas jQuery. Ia merupakan projek sumber terbuka sepenuhnya, jadi anda bebas menggunakan ini di mana-mana laman web komersial atau sebaliknya.

Ia berfungsi seperti mana-mana ciri carian pelayar, kecuali ia datang dengan barang tambahan. Anda boleh menambah penapis tersuai anda sendiri dan cari perkataan berdasarkan ungkapan biasa, sinonim tertentu, dan juga dalam elemen halaman dinamik seperti iframes.

Untuk bermula, hanya muat turun fail Mark.js dari GitHub atau tuan rumah fail tersebut melalui CDN untuk menjimatkan masa.

Anda harus menjalankan fungsi ini disambungkan ke medan input pada halaman. Dengan cara ini pengguna boleh memasukkan istilah carian dan dapatkan maklum balas serta-merta melalui teks yang diserlahkan.

Inilah a cuplikan sampel dari halaman demo:

 $ (". konteks"). tanda (kata kunci [, opsyen]); 

The .konteks sasaran kelas di mana fungsi itu patut cari istilah. Anda mungkin menggunakannya HTML lalai elemen jika anda cuba mencari keseluruhan halaman, atau anda boleh lulus pelbagai elemen seperti widget tab atau iframes yang berlainan.

Kemudian, di dalam tanda () berfungsi anda lulus kata kunci, bersama dengan pilihan (jika anda mahu).

Jika anda membenarkan pengguna menaip kata kunci maka anda boleh auto-kemas kini fungsi dengan kata kunci baru selepas setiap kekunci. Malah ada fungsi tertentu untuk menyasarkan acara ini.

Mark.js berfungsi dengan semua pelayar utama, termasuk Chrome, Firefox, Opera (v12 +), dan Internet Explorer (9+). Sangat mudah untuk menyediakan jika anda mengikuti dokumen dan menggunakan fail terbaru.

Tetapi, jika anda mahu melihatnya Mark.js dalam tindakan ambil penglihatan di biola di bawah menggunakan demo jQuery yang sangat asas untuk mencari beberapa perenggan Lorem Ipsum.