Добавяне на ключова дума за търсене чрез търсене на всяка уеб страница с Mark.js

Повечето браузъри имат CTRL + F функционалност да търсиш и да намериш каквото търси потребителят. Но тази функция не се поддържа на мобилни устройства и не работи добре с динамичен текст.

За щастие, има Mark.js, безплатен JavaScript плъгин, който добавя a маркирайте функцията за търсене към всяка страница с лекота.

По подразбиране той работи като ванилия JS плъгин но може да се изпълни върху jQuery. Това е проект с напълно отворен код, така че сте свободни да го използвате на всеки търговски сайт или по друг начин.

Тя работи много подобно на всяка функция за търсене в браузъра, с изключение на това, че идва с допълнителни екстри. Можете да добавите Ваши собствени персонализирани филтри и търсене на думи въз основа на редовни изрази, специфични синоними, и дори вътре динамични елементи на страници като рамки.

За да започнете, просто изтеглете файла Mark.js от GitHub или хоствате файла чрез CDN за да спестите време.

Трябва да изпълните тази функция свързано с поле за въвеждане на страницата. По този начин потребителите могат да въвеждат термини за търсене и получавате незабавна обратна връзка чрез маркиран текст.

Ето едно примерен фрагмент от демонстрационната страница:

 $ (". контекст"). марка (ключова дума [, опции]); 

Най- .контекст клас цели, където функцията трябва търсене на термини. Можете да използвате HTML по подразбиране елемент ако се опитвате да претърсите цялата страница, или бихте могли да преминете множество елементи като например различни приспособления за вграждане или вградени рамки.

След това вътре марка () функция да премине ключовата дума, заедно с опциите (ако желаете).

Ако позволите на потребителите да въведат ключова дума, можете автоматично обновяване на функцията с нова ключова дума след всяко натискане на клавиша. Има дори специфична функция за насочване на това събитие.

Mark.js работи с всички основни браузъри, включително Chrome, Firefox, Opera (v12 +) и Internet Explorer (9+). Наистина е лесно да се настрои, ако следвате документите и използвате най-новите файлове.

Но, ако искате да видите Mark.js в действие погледни цигулка по-долу използване на много основно jQuery демо за търсене на няколко параграфа на Lorem Ipsum.