Поиск по сайту в ajax окне

Параметр Значение
Категория Другие скрипты
Добавил uAdministrator
Дата публикации 13.05.2024, 11:42
Авторский
Адапт. дизайн
Просмотрен 67

Быстрый поиск по сайту в ajax окне для uCoz. Новый скрипт быстрого поиска по сайту в ajax окне для вашего ucoz сайта. Теперь вам не нужно думать куда вставить код поиска, мучится в настройке с дизайном страницы поиска. Вы можете поставить поиск на любую картинку, ссылку. После того, как пользователь кликнет по ссылке, картинке, откроется ajax окно как на скриншоте, все максимально просто и красиво. И теперь самое главное, ему не нужно заходить на страницу пользователя все показывается ниже.

Установка:

  1. Ставим код в нижнюю часть сайта:

Панель управления → Управление дизайном → Глобальные блоки → Нижняя часть сайта

Код
<style>  
  .myWinCont ul > li {background:#f7f7f7;border:1px solid #ccc;list-style:none;padding:4px;}  
  .myWinCont a:link, .myWinCont a:visited {text-decoration:none;color:#000}  
  .searchuWnd li:hover {background:#fff;}  
  </style>  
  <div id="searchuWnd" style="display:none;">  
  <fieldset><legend>Как пользоваться:</legend><span style="font-size:10px;"><b>1.</b> Поле "Поиск" должно содержать не менее 1 слова. <br><b>2.</b> Для поиска нажмите на картинку справа.</span></fieldset>  
  <fieldset><legend>Поиск:</legend><input type="text" style="width:243px;float:left;" val="" id="request"> <div style="padding-top:2px;padding-left:2px;"> <i class="fa fa-search" aria-hidden="true" onclick="gop();"></i></div> </fieldset>  
  <fieldset><legend>Результат:</legend><div id="rez" style="padding:0 3px;">Введите слово или фразу для поиска, после нажмите на лупу справа от формы поиска.</div></fieldset>  

  </div>  
  <script type="text/javascript">  
  // SearchuWnd  
  function poisk() {  
  new _uWnd('sers','Поиск по сайту',0,0,{autosize: 1,modal: 0,align:'left'},$('#searchuWnd').html());  
  };  
  function gop(){  
  if ($('#request').val() == '') {  
  $('#rez').html('Поле "Поиск" не может быть пустым.');  
  _uWnd.alert('<b style="color:red;font-size:12px;">Поле "Поиск" не может быть пустым.</b>','Отчет о работе',{w: 270,h: 70,t: 8000});  
  }  
  else {  
  var text_s = $('#request').val();  
  $('#rez').html('<img src="http://s32.ucoz.net/img/ma/m/i2.gif" style="padding:3px;">Обработка запроса.')  
  $.get('/search/?q=' +text_s+'&m=site&m=news&m=blog&m=publ&m=load&m=photo&m=gb&m=forum&t=0', function (poi){  
  var zap = $('#body_get',poi).text();  
  if(zap == 'По запросу ничего не найдено.') {  
  $('#rez').html('По вашему запросу <b>'+text_s+'</b> ничего не найдено, измените запрос и повторите попытку.');  
  }  
  else {  
  $('#rez').html('');  
  $('.eTitle:lt(15)', poi).each(function () {  
  $('#rez').append('<div class="searchuWnd"><ul><li>'+$(this).html()+'</li></ul></div>');  
  });};});}};  
  </script>

 

2. Идем в управление дизайном, страница поиска. Меняем $BODY$ на:

Панель управления → Управление дизайном → Поиск по сайту → Страница поиска по сайту

Код
<div id="body_get">$BODY$</div> 


3. Ставим атрибут onclick нужной ссылке, картинке и т.д:

Код
onclick="poisk();"


Например:

Код
<a href="#" onclick="poisk();">Поиск по сайту</a>


Теги: AJAX, сайту, по, окне, поиск

Комментариев пока нет..

Ты можешь быть первым, кто оставит комментарий к публикации!

Всего комментариев: 0
avatar



Администратор в сети
Администратор не в сети