Скрипт Поиск с подсказками (живой поиск) для uCoz

Итак, моя самая гениальная за последнее время работа - поиск с подсказками (живой поиск) для uCoz. Конечно, я не раз, как на верное и вы, видел подобное на других сайтах, и задумывался как бы такое реализовать в uCoz, и меня не раз просили что-то подобное сделать. Но поскольку в скриптах я не силен, то я даже не пытался. И этот раз собственно все получилось спонтанно, я совершенно не думал что все получится - тем более так хорошо!

Дело в том, что реализацию поиска с подсказками я еще некоторое время назад увидел на одном uCoz-сайте, а это означало что у кого-то это получилось и что на uCoz это точно возможно. Но адаптировать тогда тот скрипт что я видел - у меня не получилось, да и этот раз получилось не сразу - это произошло по сути случайно.

Хочу отметить, что в оригинале скрипт был сделан для модульной формы поиска, то есть производил поиск лишь по одному модулю - а не всему сайту. Но кроме того что я его вообще смог адаптировать, я его еще и адаптировал под глобальную форму поиска, то есть он может искать по всему сайту - среди материалов всех абсолютно модулей. Кроме того, усовершенствовал некоторые функциональные мелочи скрипта, такие как: плавное появление и исчезание блока с подсказками, закрытие его не с помощью кнопки - а при нажатии на любую область сайта кроме блока поиска и подсказок, в конец списка найденных результатов (а в блоке с подсказками список ограничен 10-ю результатами) добавил кнопку - при клике на которую вы переходите на полноценную страницу поиска со всеми результатами вашего запроса, ну и наконец-то сделал более привлекательным внешний вид. Что еще интересно в скрипте (но заслуга в этом вряд-ли моя), то что совпадения он находит не только в заголовке материала - но и в описании!

В общем скрипт реально уникальный и просто отличный! Но хватит прелюдий, пора переходить к делу. А начну с самой формы поиска, расскажу каких она бывает типов в uCoz, чем они отличаются и как их правильно прописывать.

Формы поиска в uCoz: типы форм

Итак, в uCoz имеется два типа форм поиска: глобальная форма поиска (по модулю /search/) и форма поиска по конкретному модулю (load, blog, stuff, news, publ, dir и т.д). В обычных условиях их можно вывести с помощью специальных условных операторов: $SEARCH_FORM$ (глобальный) и $MODULE_SEARCH_FORM$ (по модулю).

Скрипт о котором я сегодня рассказываю - работает с обоими типами форм, просто под каждую его нужно немного изменить. Однако чтоб установить этот скрипт, мы будем выводить форму поиска нужного нам типа не условным оператором, а прописывать вручную - так как ее код нам нужно будет немного модернизировать.

**Примечание! Я покажу вид форм поиска в их самом основном виде, то есть то что в них быть должно обязательно, для нормальной работы. А class'ы и id'ы к элементам форм поиска - вы можете прописывать свои, и вообще модернизировать как нужно вам (но не нарушая и не урезая основной код).

Итак, что же из себя представляют коды этих двух типов форм поиска, и чем они отличаются. Начнем с глобальной, вот так она выглядит:


А вот как выглядит код формы поиска по модулю:

Теперь о различиях их параметров:

Область поиска (action): /search/ - в глобальной, /модуль/ - в модульной.
Метод поиска (method): get - в глобальной, post - в модульной.
Имя поля поиска (name): q - в глобальной, query - в модульной.
Имя кнопки поиска (name): sfSbm - только в модульной.
Дополнительный input: - только в модульной.

В общем-то это все. Эти отличия важно учитывать, поскольку первые три параметра - необходимо указывать в скрипте. Но об этом чуть ниже.

Поэтапная установка скрипта

В данном примере, я буду показывать установку глобальной формы поиска, ибо она объединяет все модули (что например было важно для моего сайта), но при этом - ни чем не хуже модульной.

1. Скачайте архив, извлеките из него скрипт search_fast.js и залейте его в папку js (если ее нет - создайте) в корне файлового менеджера.

2. Теперь собственно этот скрипт нужно прописать на всех страницах сайта примерно перед тегом . Лично я чтоб не ставить отдельно в каждую страницу, и чтоб потом легче им управлять - просто прописывал его в конце шаблона нижней части сайта и все работало.

3. Далее прописываем форму поиска, как я и говорил - я показываю на примере глобального ее типа:

Здесь я уже прописал нужные class'ы и id'ы, которые используются в скрипте, поэтому менять их в коде формы поиска - не нужно, просто поменяйте их в стилях - если надо. Но если что, то можете заменить их и в коде - но тогда придется менять и в скрипте. Ну и чтоб вы понимали, вот собственно за что отвечают основной class и id в этом коде:

id="srch_frm" - выше я говорил что внес функцию закрытия блока подсказок при клике на любую область страницы, кроме блока поиска и подсказок, так вот этот id сообщает какой блок нужно игнорировать (то есть при клике на блок с этим id - подсказки закрываться не будут).
class="srch_fld" - ну а это по сути "ключ зажигания" скрипта, то есть обнаруживая поле с этим class'ом и набор запроса в нем - скрипт начинает работу.

Также в конце формы можно заметить блок - это собственно и есть блок всплывающих подсказок, поэтому его трогать вообще не надо. Тут разобрались, идем дальше.

4. Итак мы залили скрипт, установили его. Установили форму. И вот вы заходите на сайт, начинаете набирать запрос, скрипт находит форму поиска и анализирует запрос, переходит на страницу на которой нужно искать, но чтоб скрипт знал где на этой странице искать совпадения - нужно отметить специальным class'ом блок заголовка с ссылкой в шаблоне вид материалов (поиска или определенного модуля, в зависимости от типа формы поиска).

Ссылка и название материала (в виде материалов) должны быть такого типа: $TITLE$, и эту ссылку с названием нужно обнести любым блоком (div, span, b, strong, h1, h2, h3, и т.д) с class'ом mat-title. Вот как это сделал я:

То есть теперь получив запрос, и перейдя на страницу поиска, скрипт будет искать совпадения в блоке с class'ом mat-title, и если совпадение найдет - то выведет его содержимое, а именно ссылку с названием $TITLE$ в блок со всплывающими подсказками. Тут тоже надеюсь все понятно, идем дальше.

5. И в общем-то последнее, установка стилей блока с подсказками. Их прописываете в вашем основном css-документе:

Это стили только блока с подсказками. К форме поиска class'ы и id'ы я уже приписал, поэтому ее дизайн вы уж сами настройте, ну и дизайн блока с подсказками - также можете изменить по вкусу.

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



Ладно, теперь точно все. Хочу напоследок отметить, что скрипт (оригинал) писал не я, но я адаптировал и усовершенствовал его. Впрочем сколько я не искал - ничего подобного для uCoz не нашел, так что похоже до меня даже этого никто сделать не мог. Работоспособность и дизайн скрипта проверены во всех основных браузерах и везде одинаково отлично работают.