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

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

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

Стоит отметить, что все веб сайты очень часто позволяют пользователям совершать поиск по их это категориям, статьям, записям и т.д., но в основном это поиск по БД. Но когда нибудь мы задумывались над тем, что мы можем совершать по странице, продвинутые пользователи могут сказать: «Просто нажать 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();
};

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

Tagged , , , . Bookmark the permalink.

Также может быть интересно:

  • Артем

    Интересная вещь, надо будет попробовать. Может подскажите, а как организовать подсветку ключевых слов, когда человек переходит из поисковой системы?

    • panteleev

      Для этого вам нужно использовать либо PHP функцию getenv («HTTP_REFERER»), либо же JavaScript функцию document.referrer, далее найти нужные вхождения, передать их функции, которая подсвечивает.

      В принцепе все, вы подкинули идею, постараюсь в скором времени обязательно написать про это статью.

      • Артем

        Как напишите, дайте, пожалуйста, знать, буду ждать

  • Артем

    Проверил в Опере 12 на моем сайте не работает. При вводе слова, подсвечивается только первая буква, а само слово из поля для подсветки исчезает. При повторном введении слова, ничего не происходит, и подсветка первой буквы так и остается, хотя ваш пример на вашем сайте работает, интересно, в чем может быть ошибка? В ИЕ 8, тоже на что-то ругалось, а при вводе слова, сразу загружалась новая пустая страница.

    • panteleev

      Обязательно сделаю кросбраузерный вариант. Спасибо что заметили баг

      • Артем

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

      • Артем

        Вот вы приводите код: jQuery.fn.removeHighlight и т.д. не понятно, что с ним делать, что это за строчки с 45 по 53

        • Артем

          С этим я разобрался, но все равно под вордпрессом у меня оно не заработало

          • Артем

            Так в опере все заработало, остался ослик, почему то не хочет отображать текстовое поле ввода

          • Guest

            Вы знаете, Артем, проверил в IE, от самой 7й версии, все работает. Скажите пожалуйста, какая у вас ОС, на которой не работает данный примет?

          • panteleev

            Вы знаете, Артем, проверил в IE, от самой 7й версии, все работает. Скажите пожалуйста, какая у вас ОС, на которой не работает данный примет?

          • seoawards

            Наверное конфликтуют какие-то плагины, предлагаю вам в консоли своего браузера проверить страницу на ошибки.

            Как вариант попробуйте перед вызовом данного плагина воспользоваться функцией jQuery — jQuery.noConflict ();

          • panteleev

            Наверное конфликтуют какие-то плагины, предлагаю вам в консоли своего браузера проверить страницу на ошибки.

            Как вариант попробуйте перед вызовом данного плагина воспользоваться функцией jQuery — jQuery.noConflict ();

  • irbees

    а можно реализовать полноценный поиск? т.е . в поиске вбил ,переход на страницу поиска а там уже подсвеченно.

    • Да, конечно можно. Для этого вам через PHP нужно получить url referrer, далее, получить параметры который были в этом url, передать эти параметры в javascript и запускить функцию, которая подсвечивает текст.

      Если будет свободное время, обязательно напишу про это статью.

    • Конечно можно =)

      • irbees

        а поподробней?

        • irbees, будьте добры опишите задачу поподробнее и я постараюсь написать статью на эту тему

          • irbees

            есть сайт работает на ngcms .хотелось бы подсветку в результатах поиска

          • Ув. irbees, сформулируйте задачу поконкретнее.

            Например:

            Нужно сделать подсветку текста, когда пользователи переходят на мой сайт из поисковой системы...

  • Ололош

    Спасибо.

  • stan

    Образец хорошей работы: есть пример, легко посмотреть работу скрипта, легко подключить у себя, и всё работает!

    Спасибо!