:::: МЕНЮ ::::

jQuery: поиск и подсветка текста

Возникла необходимость организовать поиск на странице сайта с подсветкой найденного текста с помощью jQuery.

Что в итоге получилось:

  1. Поиск текста;
  2. Навигация по найденному тексту;
  3. Подсветка всего найденного текста одним цветом, а при навигации по найденному тексту — другим;
  4. Подсчет найденного текста с указанием номера при навигации.

 

poisk-02

 

За основу был взят материал с хабра, но хотелось чего-то большего, например, как здесь :) По-этому пришлось допиливать существующий материал под свои нужды, попутно исправив в нем некоторые ошибочки, которые были оставлены предыдущим автором.

В итоге получилось следующее:

1. jquery.js (я использовал версию 1.2.6)

2. jquery.highlight.js

3. jquery.scrollTo-min.js

4. и сам html-файл test.html, в котором

подключаем .js-файлы и определяем стили для найденного текста и текста при навигации

добавляем обработчик для действий

добавляем div с кнопками для поиска и навигации и div с выводом кол-ва найденного текста

и добавляем блок из div-ов

Демо можно посмотреть здесь.


11 Комментариев

  • Ответить Владимир |

    Добрый день!

    Прошу подсказать, что я делаю не так: пытаюсь установить Ваш скрипт себе на сайт — https://hauk-electro.ru/, но он почему-то не работает (я полный ноль в скриптах и устанавливаю их на уровне копировал-вставил). Что интересно, этот скрипт работает на сайте http://cssdeck.com/labs, и не работает на https://plnkr.co/edit/?p=preview.

    На странице пока установлен только Ваш скрипт, с немного сокращённым текстом:

    jQuery: поиск и подсветка текста

    .highlight {
    background-color: rgb(255,255,153);
    }
    .selectHighlight {
    background-color: yellow;
    -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;
    color:#ff0000;
    }
    .finded{
    color:white;background: #8A8A7B;
    }

    input[type="button"] {border-radius: 10px 0 0 0; border: 3px solid red}
    input[type="button"]:hover {border-radius: 10px 0 0 0; border: 3px solid blue}

    jQuery(document).ready(function(){

    var search_number = 0;
    var search_count = 0;
    var count_text = 0;
    var srch_numb = 0;

    function scroll_to_word(){
    var pos = $(‘#text .selectHighlight’).position();
    jQuery.scrollTo(«.selectHighlight», 500, {offset:-150});
    }

    $(‘#search_text’).bind(‘keyup oncnange’, function() {
    $(‘#text’).removeHighlight();
    txt = $(‘#search_text’).val();
    if (txt == ») return;
    $(‘#text’).highlight(txt);
    search_count = $(‘#text span.highlight’).size() — 1;
    count_text = search_count + 1;
    search_number = 0;
    $(‘#text’).selectHighlight(search_number);
    if ( search_count >= 0 ) scroll_to_word();
    $(‘#count’).html(‘Найдено: ‘+count_text+’‘);
    });

    $(‘#clear_button’).click(function() {
    $(‘#text’).removeHighlight();
    $(‘#search_text’).val(‘поиск’);
    $(‘#count’).html(»);
    jQuery.scrollTo(0, 500, {queue:true});
    });

    $(‘#prev_search’).click(function() {
    if (search_number == 0) return;
    $(‘#text .selectHighlight’).removeClass(‘selectHighlight’);
    search_number—;
    srch_numb = search_number + 1;
    $(‘#text’).selectHighlight(search_number);
    if ( search_count >= 0 ) {
    scroll_to_word();
    $(‘#count’).html(‘Показано: ‘+srch_numb+’ из ‘+$(‘#text span.highlight’).size());
    }
    });

    $(‘#next_search’).click(function() {
    if (search_number == search_count) return;
    $(‘#text .selectHighlight’).removeClass(‘selectHighlight’);
    search_number++;
    srch_numb = search_number + 1;
    $(‘#text’).selectHighlight(search_number);
    if ( search_count >= 0 ) {
    scroll_to_word();
    $(‘#count’).html(‘Показано: ‘+srch_numb+’ из ‘+$(‘#text span.highlight’).size());
    }
    });

    });

    <input id="prev_search" type="button" value="

    » />

    10. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    11. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


  • Ответить Александр |

    Добрый день.
    Подскажите, пожалуйста, в чём может быть проблема:
    Во всех браузерах скрипт отлично отрабатывает, но в IE 11 версии удаляет русские символы (при вводе их в строке поиска), при поиске латиницы всё в порядке. В старых версиях IE все нормально работает.
    Заранее спасибо!!!

  • Ответить Искандер |

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

  • Ответить Роман |

    Спасибо!
    Это очень крутая разработка поиска, очень функциональная! Аналогов в сети нет, я перерыл очень много страниц, Ваш вариант работает гораздо лучше и продуманее всех аналогов которые дублируют по сути сочетание клавиш «Ctrl+F». Очень пригодился мне в одном проекте, большое спасибо!

  • Ответить Айбек |

    Добрый день!
    Спасибо конечно за скрипты, но какой толк от него, если он ищет только по 1 странице?
    Да и какой смысл делать поиск на 1 странице?
    У Вас есть скрипт поиска на многостраничном сайте?
    Например вот так:
    http://www.gicdent.ru/search/?q=%D1%83%D0%B4%D0%B0%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5+%D0%B7%D1%83%D0%B1%D0%BE%D0%B2
    Спасибо. жду

    • Ответить Damon |

      Айбек, приветствую Уважаемый!
      Данный поиск не ищет по всему сайту или по базе данных, а просто подсвечивает искомый текст на той странице, которую вы открыли. Как было отмечено раньше, некая, альтернатива Ctrl+F. Сечешь, студент? ;)
      А то, что вам нужно, это «поиск по сайту», можете прямо так в яндексе и забить «скрипт поиск по сайту».

Оставить комментарий

  • Вставить изображение