เพิ่มคำค้นหาที่เน้นไปที่เว็บเพจใด ๆ ที่มี Mark.js

เบราว์เซอร์ส่วนใหญ่มี ฟังก์ชัน CTRL + F เพื่อค้นหาและค้นหาสิ่งที่ผู้ใช้ต้องการ แต่คุณสมบัตินี้ ไม่รองรับโทรศัพท์มือถือ และมันใช้งานไม่ได้กับข้อความแบบไดนามิก.

โชคดีที่มี Mark.js, ปลั๊กอิน JavaScript ฟรีที่เพิ่ม เน้นคุณสมบัติการค้นหา ไปที่หน้าใดก็ได้อย่างง่ายดาย.

โดยค่าเริ่มต้นมันทำงานเป็น ปลั๊กอินวานิลลา JS แต่ยังสามารถเรียกใช้ ด้านบนของ jQuery. มันเป็นโครงการโอเพ่นซอร์สอย่างสมบูรณ์ดังนั้นคุณสามารถใช้งานได้ฟรีในเว็บไซต์เชิงพาณิชย์หรืออื่น ๆ.

มันทำงานคล้ายกับคุณลักษณะการค้นหาเบราว์เซอร์ใด ๆ ยกเว้นมันมาพร้อมกับสารพัดพิเศษ คุณสามารถเพิ่ม ตัวกรองที่กำหนดเองของคุณเอง และค้นหาคำตาม นิพจน์ทั่วไป, คำพ้องความหมายเฉพาะ, และแม้กระทั่งใน องค์ประกอบหน้าแบบไดนามิก เช่น iframes.

ในการเริ่มต้นเพียงดาวน์โหลดไฟล์ Mark.js จาก GitHub หรือโฮสต์ไฟล์ ผ่าน CDN เพื่อประหยัดเวลา.

คุณควรใช้ฟังก์ชั่นนี้ เชื่อมต่อกับช่องรับสัญญาณ บนหน้า วิธีนี้ผู้ใช้สามารถป้อนคำค้นหาและ รับข้อเสนอแนะทันที ผ่านข้อความที่เน้นสี.

นี่คือ ตัวอย่างโค้ด จากหน้าตัวอย่าง:

 $ (". บริบท"). mark (คำสำคัญ [, ตัวเลือก]); 

.บริบท เป้าหมายระดับที่ใดก็ตามที่ฟังก์ชั่นควร ค้นหาคำศัพท์. คุณอาจใช้ HTML เริ่มต้น ธาตุ หากคุณพยายามค้นหาทั้งหน้าหรือไม่ก็ผ่าน หลายองค์ประกอบ เช่นวิดเจ็ตแบบแท็บหรือ iframes ที่แตกต่างกัน.

จากนั้นภายใน เครื่องหมาย() ฟังก์ชั่นคุณ ผ่านคำหลัก, พร้อมกับตัวเลือก (ถ้าคุณต้องการ).

หากคุณให้ผู้ใช้พิมพ์คำสำคัญคุณก็สามารถทำได้ อัปเดตฟังก์ชั่นอัตโนมัติ ด้วยคำหลักใหม่หลังจากกดปุ่มทุกครั้ง มีฟังก์ชั่นเฉพาะเพื่อกำหนดเป้าหมายเหตุการณ์นี้.

Mark.js ทำงานได้กับเบราว์เซอร์หลัก ๆ ทั้งหมด, รวมถึง Chrome, Firefox, Opera (v12 +) และ Internet Explorer (9+) มันง่ายมากที่จะตั้งค่าถ้าคุณติดตามเอกสารและใช้ไฟล์ใหม่ล่าสุด.

แต่ถ้าคุณต้องการที่จะเห็น ดำเนินการ Mark.js มองดูที่ ซอด้านล่าง ใช้การสาธิตขั้นพื้นฐาน jQuery เพื่อค้นหา Lorem Ipsum สองสามย่อหน้า.