Библиотека 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 не имеет проблем при работе с русским текстом и различными регистрами (чем, кстати, частенько грешат другие подобные скрипты).