:::: МЕНЮ ::::
Запись с тегами: jQuery

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-ов

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