Поиск текста на странице при помощи 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]

Метки: