Поиск текста на странице при помощи Jquery
Техника которая будет рассмотрена в данной статье позволит лучше показать сложный контент, позволит пользователю найти информацию намного быстрее, а также сильно отразится на юзабилити сайта.
[mantra-button-light url="http://pontyk.com.ua/wp-content/uploads/2012/08/highlight"]Demo урока[/mantra-button-light] [mantra-button-dark url="http://pontyk.com.ua/wp-content/uploads/2012/08/highlight.zip"]Скачать урок[/mantra-button-dark]
Стоит отметить, что все веб сайты очень часто позволяют пользователям совершать поиск по их это категориям, статьям, записям и т.д., но в основном это поиск по БД. Но когда нибудь мы задумывались над тем, что мы можем совершать по странице, продвинутые пользователи могут сказать: «Просто нажать CTRL + F!». Но а если я не знаю комбинации клавишь, или ваш пользователь только научился пользоваться браузером, бывает и такое, что тогда, пускай учит комбинации? Нет! Можно облегчить жизнь пользователю, и добавить форму поиска по содержимому сайта, и при вводе текста в данную форму, на странице ему просто подсвечивается набираемый им текст, просто, не правда ли?
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(); };
[mantra-button-light url="http://pontyk.com.ua/wp-content/uploads/2012/08/highlight"]Demo урока[/mantra-button-light] [mantra-button-dark url="http://pontyk.com.ua/wp-content/uploads/2012/08/highlight.zip"]Скачать урок[/mantra-button-dark]