« Поиск по сайту с подсказками для сайтов uCoz »

Описание материала:

Всем доброго времени суток!

Многие держат свои сайты, добавляют на низ различные фишки и функционал. Это всё здорово, так как всё это сайту добавляет удобства для пользователей и обновляет в целом дизайн сайта самого.

В этом материале речь пойдёт о скрипте поиск по сайту , естественно поиск по сайту на сайтах uCoz имеется изначально, но вот они стандартны, а наш поиск будет выводить ниже список результатов поиска сравнивая с вашим запросом.

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

Поиск с подсказками протестирован на моём тестовом сайте и даже я им сам когда то пользовался пока не перешёл на создание сайтов на DLE движке, но переход на DLE не мешает мне искать для себя и своего интереса различные дизайны для uCoz так как я с этого конструктора начинал и скорее всего он лично для меня и будет всегда лучшим и первым.

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

Этот код нужно размещать в то место на сайте где он вам нужен, но лучше всего в верхнюю часть сайта.

Код
<form onsubmit="search();return false;" method="post" action="/load/" id="searchform" class="andrnone">  
<input type="text" class="srch_fld" name="query" maxlength="100" style="width:520px;height:35px;" onblur="if(this.value =='') this.value='Введите часть названия, для более точного поиска...'" onfocus="if (this.value == 'Введите часть названия, для более точного поиска...') this.value=''" value="Введите часть названия, для более точного поиска..." id="querys">  
<input type="hidden" name="a" value="2"><input class="searchSbmFl" name="sfSbm" value="" type="submit" title="Найти"><div id="poisk2"></div></form>
<script type="text/javascript" src="/js/search_fast.js"></script>


Далее в вид материалов каталога файлов нужно в самый низ установить этот код.

Код
<div style="display:none;"><div class="mat-title"><a href="$ENTRY_URL$" rel="nofollow"><img src="$IMG_URL1$" height="40px" width="30px" align="middle"> $TITLE$ </a></div></div>


Затем вставьте стили в нижнюю часть стилей вашего сайта.

Код
/*searchform*/
#searchform {padding-bottom: 3px; height:40px; margin-left: 70px; display: inline-block;}
#searchform input[type="text"]{ height:34px; width:400px !important; font-size:13px; padding:0px 0px 0px 15px; border-radius: 5px; margin:0px 0px 0px 0px; color:#DCDCDC; border:1px solid #223845; -webkit-box-shadow: inset 0px 1px 2px 2px rgba(0, 0, 0, 0.75), 0px 1px 0px 0px #2b2b2b; box-shadow: inset 0px 1px 1px 1px rgba(0, 0, 0, 0.75), 0px 1px 0px 0px #2b2b2b; background: #181818; background-image: -webkit-linear-gradient(left, #181818, #132532); background-image: -moz-linear-gradient(left, #181818, #132532); background-image: -ms-linear-gradient(left, #181818, #132532); background-image: -o-linear-gradient(left, #181818, #132532); background-image: linear-gradient(left, #181818, #132532); }
#searchform input[type="submit"]{ background:url(http://kino-vor.ru/templates/kino-vor/dleimages/poisk.png) top right no-repeat; cursor:pointer; border:none; width:23px; margin:0px 0px 0px 0px; padding:0px 0px 6px 0px; transition:none; -moz-transition:none; -webkit-transition:none; -o-transition:none; }
#searchform input[type="submit"]:hover {background-position:0px -25px;}

#poisk2 a:hover {background: #A3C2DC;}  
#poisk2 a:last-child {border-bottom: 0px solid;}  

#poisk2 { border: 3px solid #eee; position: absolute; margin-left: 0px; margin-top: 10px; display: none; font-weight: bold; width: 536px; box-shadow: 3px 3px 3px #000, inset 3px 3px 3px rgba(0,0,0,.9); z-index: 100;}
#poisk2::after { border-bottom: 8px solid transparent; border-left: 0px solid transparent; border-right: 8px solid #eee; border-top: 8px solid transparent; content: ""; left: 20px; position: absolute; top: -15px; transform: rotate(90deg); writing-mode: tb-rl;}
#poisk2 span { color:#444 !important; background: #EEE; display: block; padding: 8px;}
#poisk2 input { background: #263742 !important; color: #fff !important; font-weight:bold; border: 0px !important; cursor:pointer; border-radius:0 !important; padding: 2px !important; height: 30px; width: 100% !important; margin: 0px;}
#poisk2 input:hover {background: #315974 !important;}
#poisk2 a { border-bottom: 1px solid #DCDCDC; color:#000 !important; font-weight:bold; text-decoration:none; white-space: normal; background: #EEE; display:block; padding: 5px; height: auto;}


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


Скачать ( Размер архива 2.5 Kb )

По данной ссылке, Вы можете скачать или купить архив данного материала

Установка материала

Мы поможем установить данный материал к Вам на сайт

Источник

Материал взят со стороннего ресурса и был проверен нами


Добавил: Dimstrik | Категория: Скрипты для uCoz | Просмотров: 761 | Загрузок: 50


Поделиться в соц. сетях:
Комментариев к материалу: 3
А этот скрипт ищет по дополнительным полям?
0
Jeka 25.08.2016 в 09:22Спам
С картинкой решил проблему!
0
Jeka 25.08.2016 в 08:54Спам
Не отображает картинки: http://s8.hostingkartinok.com/uploads/images/2016/08/7d18694b0df34f82b8ef1378ffd111a4.png
-1
avatar