» »

Поиск по сайту с подсказками на uCoz


Поиск по сайту с подсказками на uCoz

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

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

Переходим к установке:

Скачиваем архив и находим в нем папки img и js, которые нужно закинуть файловый менеджер.

Далее копируем основной код, и ставим там, где вы хотите видеть поиск.

Код
<div class="search right">  
<form onsubmit="search();return false;" method="post" action="/load/" style="margin: 0px;" id="searchform">  
<input id="story" type="text" name="query" placeholder="Поиск по сайту..." class="searchform poick_pole query-field srch_fld" autocomplete="off" id="querys">  
<input type="hidden" name="a" value="2"><input type="submit" class="query-search" name="sfSbm" value="">  
<div id="poisk2"></div>  
  </form>  
<script type="text/javascript" src="/js/search_fast.js"></script>  
</div>


Теперь идем в вид материалов каталога файлов и в самый низ ставим скрипт, не чего не меняем в этой странице.

Код
<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>


Остается разместить стили в CSS и можно в самый низ, где вы сами потом сможете, если нужно изменить дизайн поиска.

Код
.search {background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.17); width: 253px; height: 41px; margin-top: 4px;margin-right: 4px;}  
.search input.query-field {background: transparent; border: 0 none; width: 176px; height: 39px; padding: 0 0 0 27px; color: #fff; float: left;}  
.search input.query-search {background: url('/img/search-button.png') no-repeat; border: 0 none; width: 15px; height: 13px; margin: 14px 20px 0 0; padding: 0; cursor: pointer; float: right;}  
.searchinfo {display: -webkit-inline-box; margin-left: 140px; margin-top: 4px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.17); padding: 12px 0 9px 12px; width: 30px;}  
.right { float: right; }  

#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: 50px; display: none; font-weight: bold; width: 430px; 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;}


PS - материал полностью рабочий, все делаем как описано, также в архиве все продублтрованно по материалу.

Источник: uconet.ru
10.10.2016 Загрузок: 5 Просмотров: 518 Комментарий: (12)

Поделиться в социальных сетях

Материал разместил

Комментарий: 12
Brung
Brung 10.10.2016 23:291
0
Интересно, так все как нужно, и для пользователя или гостя поиск будет удобный. Но вот на какую тематику его ставить, но на кино онлайн думаю не нужно, там основном все разные название фильма идут, бывает так что сериал схожим названием есть, но из за этого не думаю что установка нужна, а так впечатляет, если он работает.
Kosten
Kosten 10.10.2016 23:505
0
Вот приходилось видеть на одном кино сайте такую функцию, или возможно игровой больше был.
Kosten
Kosten 10.10.2016 23:342
0
Его ДимДимыч проверял, и написал даже в название слово "Рабочий" думаю это как раз ключевое слово. Просто на тестовом сайте не проверишь его, так как материала на нем всегда очень мало, так что приходится верить, да и источник подтверждает, что рабочий материал, так как автор не когда на свой блог не не рабочий материал.
FeStemBer
FeStemBer 10.10.2016 23:423
0
А что в каталога файлов, это GET запрос на изображение, и что означает, только по каталогу файлов будет искать, так как форум не будет выдавать картинку.
tsakonter
tsakonter 10.10.2016 23:484
0
Если не ошибаюсь, то GET запрос задается на скрипте, а там простой код. И не нужно забывать, что в поиске вид материала есть, и там оператор на изображение работает. Если в него поставить, любой вид материала, то будет выводить с картинкой.
Kosten
Kosten 10.10.2016 23:536
0
Нет так не какого GET запроса, все правильно, вид материала есть, раньше на сайте ставил, на старом шаблоне. Но там все не нужные функций убрал, и оставил саму форму для изображение и название, если с форума было, то автоматически появлялось No Avatar, но сейчас не сделать, так как нужно все адаптировать под мобильные устройства, а по умолчанию нормально идет.
Brung
Brung 10.10.2016 23:557
0
Есть же скрипт на PNP поиска подсказка, или ошибаюсь, но мне так кажется встречал, платно.
Сафрон
Сафрон 10.10.2016 23:588
0
Но здесь точно No Avatar не будет, и больше всего работать на модуль файлов все настроено.
FeStemBer
FeStemBer 11.10.2016 00:009
0
Да, что говорить, нужно просто поставить и посмотреть, но если сам поиск можно еще редактировать, это нормально, посмотрел, там только одна ссылка, значит он полностью на стилях.
Brung
Brung 11.10.2016 16:2211
0
Любой поиск можно редактировать, но не у любого есть такая функция.
Советник
Советник 11.10.2016 00:0410
0
Давно пора на системе так сделать, только как всегда, устаноака происходит, не просто поставил и все, здесь скачать и по страницам еще пройтись.
Webmaster32
Webmaster32 12.10.2016 20:4912
0
Цитата Советник
Давно пора на системе так сделать

Согласен, функции быстрого поиска по сайту системе Ucoz как раз таки и не хватает.
avatar