Библиотека searchhi и поиск слов на веб-странице

Библиотека searchhi - это набор JavaScript-функций, обеспечивающий реализацию одной конкретной задачи: выделение искомых слов на веб-странице.

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

Согласитесь, штука весьма полезная :-) Особенно, если на вашем сайте много текстовой информации и присутствует функция поиска по сайту.

Как данную библиотеку можно применить на своём веб-ресурсе?

Давайте рассмотрим самый простой случай использования возможностей библиотеки searchhi.

Первым делом, нам понадобится сама библиотека. Скачать её можно здесь или здесь.

Затем нам надо подключить библиотеку к нашей веб-странице. Для этого нам понадобится между тегами HEAD прописать следующий код (при необходимости измените относительный путь к файлу searchhi.js или укажите абсолютный путь к нему).

Код HTML:

<script src="searchhi.js" type="text/javascript"></script>

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

Код CSS:

.searchword { background-color:#ffff00; }

Обратите внимание на селектор класса .searchword. Именно этот селектор надо использовать, чтобы задать оформление для выделений. С внешним видом самого выделения можно экспериментировать (изменять стиль текста, размер, цвет и так далее). Но учтите, что жёлтый фон выделения - это классика. И большинство пользователей привыкло именно к такому оформлению.

Теперь все предварительные настройки сделаны и осталось только запустить работу скрипта. Для этого нам надо или во внешнем js-файле, или внутри тегов SCRIPT на самой web-странице вызвать функцию localSearchHighlight() и передать этой функции в качестве параметра искомое слово или фразу.

Код JavaScript:

localSearchHighlight('?h=' + 'ваш запрос');

Обратите внимание на формат строки, которую принимает в качестве параметра функция localSearchHighlight(). Здесь нет ошибки и любой запрос должен начинаться с подстроки "?h=". Иначе скрипт работать не будет.

Разумнее, конечно, дождаться окончания загрузки страницы и только после этого вызывать функцию localSearchHighlight().

Код JavaScript:

<script> window.onload = function(){ localSearchHighlight('?h=' + 'ваш запрос'); </script>

Всё, теперь у нас должно всё работать!

Хотя сам скрипт searchhi весьма объёмный, но он довольно неплохо справляется даже с большими текстами. Библиотека searchhi не имеет проблем при работе с русским текстом и различными регистрами (чем, кстати, частенько грешат другие подобные скрипты).

Автор: admin

Дата добавления: 2012-03-20

Просмотров: 2067

Рейтинг поста: +3-

Правила перепечатки

Социальные закладки:
Комментарии:
К данной заметке комментариев пока нет. Ваш комментарий может стать первым.
Добавить комментарий:







[ + ] помощь по форматирование текста

Идиот-тест

Если все обязательные поля (отмечены * ) заполнены необходимой информацией, то нажимаем кнопку Добавить комментарий.

Меню
Подписка
Рубрики
Метки
Последние комментарии
Рейтинг постов
Реклама
Друзья
География гостей
Статистика
Яндекс.Метрика