Поиск текста на странице при помощи Jquery

Опубликовано: 01.09.2018

видео Поиск текста на странице при помощи Jquery

Основы javascript 18 — Изменение стилей элемента.

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



Demo урока Скачать урок

Стоит отметить, что все веб сайты очень часто позволяют пользователям совершать поиск по их это категориям, статьям, записям и т.д., но в основном это поиск по БД. Но когда нибудь мы задумывались над тем, что мы можем совершать по странице, продвинутые пользователи могут сказать: «Просто нажать CTRL + F!». Но а если я не знаю комбинации клавишь, или ваш пользователь только научился пользоваться браузером, бывает и такое, что тогда, пускай учит комбинации? Нет! Можно облегчить жизнь пользователю, и добавить форму поиска по содержимому сайта , и при вводе текста в данную форму, на странице ему просто подсвечивается набираемый им текст, просто, не правда ли?

✦ jQuery плагин фото "До/после" 🔥 twentytwenty jquery plugin before/after

Hазметки и взаимодействие с DOM

Для этого понадобиться обыкновенный input с указаным id:

<input type="text" id="text-search" />

Далее прицепить обработчики события keyUp и change на форму ввода:

$(function() { $('#text-search').bind('keyup change', function(ev) { // вставка нового искомого значения var searchTerm = $(this).val(); )}; });

Эти обработчики гарантируют нам, что текст будет искаться в случае ввода текста в поле, или нажатии кнопки ctrl + v.

Теперь давайте подключим плагин подсвечивания на страницу. Его можно взять с сайта разработчика Highlight или скачать отсюда

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

$(function() { $('#text-search').bind('keyup change', function(ev) { // вставка нового искомого значения var searchTerm = $(this).val(); // отключить подсвечивание, если переменная посиска пуста if ( searchTerm ) { // подсветить, если введено новое слово или значение $('body').highlight( searchTerm ); } }); });

В этой конструкции мы проверяем, чтобы было введено искомое слово

if ( searchTerm )

Здесь указываем область поиска, вместо body можно использовать .className и #id

$('body').highlight( searchTerm );

Стилизация подсветки

После того как все размечено, и подключена обработка событий(взаимодействие с dom), нужно все красиво оформить.

Плагин подсветки( Highlight ) для подсветки оборачивает искомое значение в , ну вот этот highlight класс над и нужно стилизовать при помощи CSS.

.highlight { background-color: #fff34d; -moz-border-radius: 5px; /* FF1+ */ -webkit-border-radius: 5px; /* Saf3-4 */ border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */ -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */ -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */ padding:1px 4px; margin:0 -4px; }

Завершение взаимодействия

Последнее не самое немаловажное, удаление любого старого подсвеченного значения.

$(function() { $('#text-search').bind('keyup change', function(ev) { // вставка нового искомого значения var searchTerm = $(this).val(); // удаление любого старого подсвеченного значения $('body').removeHighlight(); // отключить подсвечивание, если переменная посиска пуста if ( searchTerm ) { // подсветить, если введено новое слово или значение $('body').highlight( searchTerm ); } }); });

Здесь просто добавилась функция removeHighlight () которая и совершает удаления подсветки.

Эта функция работает в большинстве браузеров, но есть небольшое исключение, этим исключением является IE6. ( В принцепе вы можете и не фиксить эту проблему, но а вдруг если у вашего пользователя будет IE6 ???? ).

В общем просто замените код плагина со строки 45 до 53 и будет вам счастье ????

jQuery.fn.removeHighlight = function() { function newNormalize(node) { for (var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) { var child = children[i]; if (child.nodeType == 1) { newNormalize(child); continue; } if (child.nodeType != 3) { continue; } var next = child.nextSibling; if (next == null || next.nodeType != 3) { continue; } var combined_text = child.nodeValue + next.nodeValue; new_node = node.ownerDocument.createTextNode(combined_text); node.insertBefore(new_node, child); node.removeChild(child); node.removeChild(next); i--; nodeCount--; } } return this.find("span.highlight").each(function() { var thisParent = this.parentNode; thisParent.replaceChild(this.firstChild, this); newNormalize(thisParent); }).end(); };

Demo урока         Скачать урок

rss