Небольшая система помощи для сайта на jQuery RUDEBOXКак часто вы сталкивались с проблемой поиска определенной информации на сайте? Особенно если текста много, а вам необходимо найти какое-нибудь обозначение слова. Для этого в браузерах есть так называемая «умная» система поиска, в которую вводите слово, а она сразу прокручивает к необходимому месту и выделяет необходимый материал. Это весьма удобно. Но такую систему можно с легкостью реализовать у себя на сайте. В данном уроке мы рассмотрим как создать небольшую систему помощи для сайта.

 

Основная идея состоит в том, что мы будем использовать событие input для поля, где будем вводить текст. Событие input не поддерживается в старых браузерах. Но вы можете легко заменить его на keypress, если потребуется работа в старых браузерах. Кроме этого, нам понадобится небольшой плагин jQuery.scrollTo, для плавной прокрутки страницы при поиске. И так, давайте приступим.

Шаг 1. HTML

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

Обратит внимание, что виджет имеет поле ввода текста, внутри элемента #header, и контейнер #content. Внутри контейнера вы можете помещать необходимый вам текст.

Небольшая система помощи для сайта на jQuery RUDEBOX

Шаг 2. jQuery

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

Обратите внимание, что вы не можете  просто извлекать внутренний код элемента div и вызвать replace() для замены найденного фрагмента элементомspan, так как данное действие приведет к нарушению разметки. Если кто-то введет для поиска “div”, то все элементы <div> будут заменены на  <<span>div</span>>, что приведет к проблемам.

Но решение достаточно простое – используем метод jQuery contents() для получения все наследников элемента и используем функцию replace() только для текста в текстовых узлах, таким образом гарантируется, что в тексте нет никакого кода HTML.

Используем сам плагин:

У нас имеется еще одна небольшая функция, а именно для прокрутки – scrollNext, которая вызывается, когда пользователь нажимает клавишу Enter.

Вот и все. Готово!

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