Поиск для блога с помощью Google AJAX Search API и jQuery


В предыдущих статьях я упоминал о различных поисках в блоге, используя различные сервисы. Сам остановился на поиске от Яндекса, потому что он хорошо работает (но не всегда, как оказалось) и не запихивает никакой рекламы в результаты.

В этой статье я решил продвинуться в своих исследования по этому вопросу и копать в сторону связки Google Search Api + jQuery + Ajax. Звучит устрашающе? Это "взрослые" штуки: выводить результаты гуглопоиска на этой же странице, без перезагрузки.

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

Что это за поиск?
Это не просто поиск статей в блоге, возле поля ввода запроса можно заметить четыре опции:
-- обычный поиск материалов
-- поиск картинок
-- поиск видео
-- поиск новостей (последнее актуально для веб-поиска)

Результаты поиска отображаются чуть ниже и разделены кнопкой "Дальше".


В центре всего сабжа выделим скрипт script.js. В той статье по ссылке подробно разъяснено, как этот скрипт заимоидействует с гугловским поисковым api.
А вот мой вариант - script.js. Я заточил его под использование в блоге (выкинул лишнее). Чтобы поиск работал на другом сайте или блоге, нужно исправить url с моего на свой:

var config = {
siteURL : 'blogger.omg-linux.ru', // url блога
searchSite : true,
type : 'web',
append : false,
perPage : 8, // Максимум из того, что разрешено
page : 0 // Стартовая страница (?)
}

Стили для этого блока с поиском получились такие:
<style>
*{
 margin:0;
 padding:0;
}
#page{
 /* The main container div */
 width:620px;
 margin:100px auto 0;
}


#searchForm{
 /* The search form. */
 background-color:#4C5A65;
 padding:50px 50px 30px;
 margin:80px 0;
 position:relative;

 -moz-border-radius:16px;
 -webkit-border-radius:16px;
 border-radius:16px;
}

fieldset{
 border:none;
}

#searchInputContainer{
 /* This div contains the transparent search box */
 width:420px;
 height:36px;
 background:url("http://4.bp.blogspot.com/-z_dxhHY9UeE/Tq5dM12wH0I/AAAAAAAAGuc/aZSH9YBM54o/s1600/searchBox.png") no-repeat;
 float:left;
 margin-right:12px;
}

#s{
 /* The search text box. */
 
 border:none;
 color:#888888;
 background:url("http://4.bp.blogspot.com/-z_dxhHY9UeE/Tq5dM12wH0I/AAAAAAAAGuc/aZSH9YBM54o/s1600/searchBox.png") no-repeat;
 
 float:left;
 font-family:Arial,Helvetica,sans-serif;
 font-size:15px;
 height:36px;
 line-height:36px;
 margin-right:12px;
 outline:medium none;
 padding:0 0 0 35px;
 text-shadow:1px 1px 0 white;
 width:385px;
}

/* The UL that contains the search type icons */

.icons{
 list-style:none;
 margin:10px 0 0 335px;
 height:19px;
 position:relative;
}

.icons li{
 background:url("http://4.bp.blogspot.com/-66luRRf-P_g/Tq5dMrDNiiI/AAAAAAAAGuQ/k9ZiESwXw3w/s1600/icons.png") no-repeat;
 float:left;
 height:19px;
 text-indent:-9999px;
 cursor:pointer;
 margin-right:5px;
}

/* Styling each icon */

li.web{ width:15px;}
li.web.active,
li.web:hover{ background-position:left bottom;}

li.images{ width:22px; background-position:-18px 0;}
li.images.active,
li.images:hover{ background-position:-18px bottom;}

li.news{ width:14px; background-position:-44px 0;}
li.news.active,
li.news:hover{ background-position:-44px bottom;}

li.videos{ width:17px; background-position:right 0;}
li.videos.active,
li.videos:hover{ background-position:right bottom;}

span.arrow{
 /* The little arrow that moves below the icons */
 
 width:11px;
 height:6px;
 margin:21px 0 0 5px;
 position:absolute;
 background:url('http://4.bp.blogspot.com/-Jn8cBCK1grE/Tq5dMVyevUI/AAAAAAAAGuE/JyacwjWvIUg/s1600/arrow.png') no-repeat;
 left:0;
}


/* The submit button */


#submitButton{
 background:url('http://1.bp.blogspot.com/-EQdJgWLz3qc/Tq5SY20Ro9I/AAAAAAAAGt4/0cZD_02ScHM/s1600/buttons.png') no-repeat;
 width:83px;
 height:36px;
 text-indent:-9999px;
 overflow:hidden;
 text-transform:uppercase;
 border:none;
 cursor:pointer;
}

#submitButton:hover{
 background-position:left bottom;
}


/* The Search tutorialzine.com / Search the Web radio buttons */


#searchInContainer{
 float:left;
 margin-top:12px;
 width:330px;
}

label{
 color:#DDDDDD;
 cursor:pointer;
 font-size:11px;
 position:relative;
 right:-2px;
 top:-2px;
 margin-right:10px;
 white-space:nowrap;
 /*float:left;*/
}

input[type=radio]{
 cursor:pointer;
 /*float:left;*/
}


/* Styling the search results */


.pageContainer{
 /* Holds each page with search results. Has an inset bottom border. */
 border-bottom:1px solid #5e7481;
 margin-bottom:50px;
 
 /* Adding a dark bottom border with box shadow */
 
 -moz-box-shadow:0 1px 0 #798e9c;
 -webkit-box-shadow:0 1px 0 #798e9c;
 box-shadow:0 1px 0 #798e9c;
}


p.notFound{
 text-align:center;
 padding:0 0 40px;
}


/* Web & news results */


.webResult{ #text-shadow:1px 1px 0 #586a75;margin-bottom:50px;}
.webResult h2{ 
 background-color:#5D6F7B;
 font-size:18px;
 font-weight:normal;
 padding:8px 20px;
 
 /* Applying CSS3 rounded corners */
 -moz-border-radius:18px;
 -webkit-border-radius:18px;
 border-radius:18px;
}
.webResult h2 b{ color:#fff; }
.webResult h2 a{ color:#eee;border:none;}
.webResult p{ line-height:1.5;padding:15px 20px;}
.webResult p b{ color:gray;}
.webResult > a{ margin-left:20px;}


/* Image & video search results */


.imageResult{
 float:left;
 height:180px;
 margin:0 0 20px 40px;
 text-align:center;
 width:152px;
 overflow:hidden;
}
.imageResult img{ display:block;border:none;}
.imageResult a.pic{
 border:1px solid #fff;
 outline:1px solid #777;
 display:block;
 margin:0 auto 15px;
}

/* The show more button */

#more{
 width:83px;
 height:24px;
 background:url('http://1.bp.blogspot.com/-UVgvYFq-JvE/Tq5QGWFD-aI/AAAAAAAAGtg/baF-NfEG-wM/s1600/more.png') no-repeat;
 cursor:pointer;
 margin:40px auto;
}

#more:hover{
 background-position:left bottom;
}
.clear{
 clear:both;
}
</style>
Возни с css было больше всего. Кнопки я "русифицировал" в джимпе и переложил на хостинг пикасы.
Цвета различных элементов подгоняются тоже здесь. Вариант в файле.

html код:
<div id="page">
<form id="searchForm" method="post">
<fieldset>
<input id="s" type="text" />

<input type="submit" value="Submit" id="submitButton" />
<div id="searchInContainer">
<input type="radio" name="check" value="site" id="searchSite" checked />
<label for="searchSite" id="siteNameLabel">Искать в блоге</label>
<input type="radio" name="check" value="web" id="searchWeb" />
<label for="searchWeb">Искать в интернете</label>
</div>
<ul class="icons">
<li class="web" title="Web Search" data-searchType="web">Web</li>
<li class="images" title="Image Search" data-searchType="images">Images</li>
<li class="news" title="News Search" data-searchType="news">News</li>
<li class="videos" title="Video Search" data-searchType="video">Videos</li>
</ul>
</fieldset>
</form>
<div id="resultsDiv">
</div>
</div>
Код включает в себя радиокнопку web-поиска (см. ниже полный вариант демо).

Демо:






  • Web
  • Images
  • News
  • Videos

Можете попробовать разные запросы, типа: html, css, jquery, виджеты, яндекс и другие. Переключитесь в режим поиска картинок (видео и новостей у меня нет). Для возврата в статью просто обовите страницу в браузере.

Полная версия демо (включая web-поиск) находится на тестовом блоге.

И так, подведём итог.
Для установки такого поиска нужны:
1) Библиотека jQuery
2)
<link rel="stylesheet" type="text/css" href="http://ваш-хостинг.ру/styles.css" />
<script src="http://ваш-хостинг.ру/script.js"></script>
3) И html код (см. выше), который нужно поставить непосредственно в то место, где нужен поиск.

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

А у этой статьи есть продолжение!

Что ещё интересного?
Пользовательские поиски для блога.

Комментариев нет:

Отправка комментария