Додати пошук ключових слів до будь-якої веб-сторінки з Mark.js

Більшість браузерів мають Функціональні можливості CTRL + F шукати і знаходити все, що шукає користувач. Але, ця функція не підтримується на мобільних пристроях і не працює добре за допомогою динамічного тексту.

На щастя, є Mark.js, безкоштовний додаток JavaScript, який додає a виділити функцію пошуку на будь-яку сторінку з легкістю.

За замовчуванням він працює як плагін ванільного JS але також може працювати поверх jQuery. Це повністю відкритий проект, тому ви можете використовувати його на будь-якому комерційному веб-сайті чи іншому.

Він працює так само, як і будь-яка функція пошуку в браузері, за винятком того, що він постачається з додатковими смаколиками. Можна додати власні фільтри і шукати слова на основі регулярні вирази, певні синоніми, і навіть у Росії елементи динамічної сторінки такі як фрейми.

Щоб розпочати роботу, просто завантажте файл Mark.js від GitHub або розмістити файл через CDN щоб заощадити час.

Ви повинні запустити цю функцію підключено до поля введення на сторінці. Таким чином користувачі можуть вводити пошукові терміни і отримати негайний відгук через виділений текст.

Ось a фрагмент зразка з демонстраційної сторінки:

 $ (". context"). знак (ключове слово [, options]); 

The .контексті цільових класів, де повинна бути функція пошук термінів. Ви можете скористатися HTML за замовчуванням елемент якщо ви намагаєтеся здійснити пошук по всій сторінці, або ви можете пройти кілька елементів такі як віджети або вкладені фрейми.

Потім, всередині позначити () функція передайте ключове слово, разом з параметрами (якщо хочете).

Якщо ви дозволяєте користувачам вводити ключове слово, ви можете автоматичне оновлення функції з новим ключовим словом після кожного натискання клавіші. Існує навіть особлива функція для націлювання на цю подію.

Mark.js працює з усіма основними браузерами, включаючи Chrome, Firefox, Opera (v12 +) та Internet Explorer (9+). Це дуже легко налаштувати, якщо дотримуватись документів і використовувати найновіші файли.

Але, якщо ви хочете побачити Mark.js в дії подивіться на скрипка нижче використовуючи дуже простий jQuery демо для пошуку декількох абзаців Lorem Ipsum.