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

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

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

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

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

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

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

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

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

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

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

Код
<form onsubmit="this.sfSbm.disabled=true" method="get" action="/search/">  
<input name="q" maxlength="30" size="20" type="text"/>  
<input value="Найти" type="submit"/>  
</form>

А вот как выглядит код формы поиска по модулю:
Код
<form onsubmit="this.sfSbm.disabled=true" method="post" action="/модуль/">  
<input name="query" maxlength="30" size="20" type="text"/>  
<input name="sfSbm" value="Найти" type="submit"/>  
<input type="hidden" name="a" value="2"/>  
</form>

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

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

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

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

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

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

2. Теперь собственно этот скрипт нужно прописать на всех страницах сайта примерно перед тегом . Лично я чтоб не ставить отдельно в каждую страницу, и чтоб потом легче им управлять - просто прописывал его в конце шаблона нижней части сайта и все работало.
Код
<script type="text/javascript" src="/js/search_fast.js"></script>

3. Далее прописываем форму поиска, как я и говорил - я показываю на примере глобального ее типа:
Код
<form onsubmit="this.sfSbm.disabled=true" id="srch_frm" method="get" action="/search/">  
<input class="srch_fld" name="q" maxlength="30" size="20" placeholder="Поиск..." type="text"/>  
<input class="srch_btn" name="sfSbm" value="Найти" type="submit"/>  
<div id="search2"></div>  
</form>

Здесь я уже прописал нужные 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. Вот как это сделал я:
Код
<h2 class="mat-title"><a href="$ENTRY_URL$">$TITLE$</a></h2>

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

5. И в общем-то последнее, установка стилей блока с подсказками. Их прописываете в вашем основном css-документе:
Код
/*----------------[ПОИСК С ПОДСКАЗКАМИ]----------------*/  

#search2 input:hover {background: #EDA8A8 !important;}  
#search2 a:hover {background: #A3C2DC;}  
#search2 a:last-child {border-bottom: 0px solid;}  

#search2 {  
box-shadow: 0px 18px 18px #444;  
border: 1px solid #6D8FA8;  
position: absolute;  
margin-left: 4px;  
margin-top: 12px;  
display: none;  
width: 254px;  
z-index: 100;}  

#search2::after {  
border-bottom: 8px solid transparent;  
border-left: 0px solid transparent;  
border-right: 8px solid #6D8FA8;  
border-top: 8px solid transparent;  
content: "";  
left: 20px;  
position: absolute;  
top: -12px;  
transform: rotate(90deg);  
writing-mode: tb-rl;}  

#search2 span {  
color:#444 !important;  
background: #EEE;  
display: block;  
padding: 8px;}  

#search2 input {  
background: #F2CBCB !important;  
color: #AC2222 !important;  
border: 0px none;  
cursor:pointer;  
padding: 8px;  
height: 30px;  
width: 100%;}  

#search2 a {  
border-bottom: 1px solid #6D8FA8;  
color:#222 !important;  
text-decoration:none;  
white-space: normal;  
background: #EEE;  
display:block;  
padding: 8px;  
height: auto;}

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

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



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

Похожие статьи

Всего комментариев: 1
avatar
1
Как сделать такой же поиск по модулю, но на разных языках, например название поста на Английском вывод $TITLE$ и есть доп поле где я вписываю РУ название. Как сделать поиск на двух языках?
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]