Поиск по сайту с использованием API Google AJAX Search

Одной из наиболее часто используемых на сайтах опций является организация поиска информации. Можно создавать функцию поиска самостоятельно с нуля. То есть использовать серверный язык программирования (например,  PHP) для организации запросов к базе данных и выводить результат на странице.

Другой метод - использовать сервис одного из поисковых сайтов, которые уже имеют огромный набор информации практически обо всем. В данном уроке мы будем использовать API Google AJAX Search для создания пользовательского поискового механизма, который позволит искать страницы, изображения, видео и новости на вашем сайте.

demosourse

HTML

Начнем с разметки HTML. Используем новинку HTML5 doctype, затем определяем заголовок документа и включаем таблицу стилей в секцию head.

search.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Поиск по сайту с использованием Google | Демонстрация для сайта RUSELLER.COM</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="page">
<h1>Поиск по сайту с использованием Google</h1>
<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="Страницы" data-searchType="web">Страницы</li>
<li class="images" title="Изображения" data-searchType="images">Изображения</li>
<li class="news" title="Новости" data-searchType="news">Новости</li>
<li class="videos" title="Видео" data-searchType="video">Видео</li>
</ul>
</fieldset>
</form>
<div id="resultsDiv"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

В секции body определяем основной контейнер элемент div #page. Форма размещенная внутри него действует не только как поисковая форма, но и как контейнер. Она имеет скругленные углы CSS3 и темный цвет фона, который позволяет легко отличить ее от остального содержания страницы.

Внутри формы имеется поле текста поиска, после которого определяются радио кнопки для выбора варианта поиска по сайту или в интернет, а также четыре иконки типа поиска, которые организованы в неупорядоченный список. В конце страницы мы включаем jQuery и наш scripts.js, который будет разобран далее.

Поиск по сайту с использованием Google

CSS

Стили CSS находятся в файле styles.css. Здесь приводится только наиболее интересная их часть.

styles.css – Часть 1

#searchForm{
	/* Форма поиска. */
	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{
	/* Данный div содержит прозрачный прямоугольник над полем текста поиска */
	width:420px;
	height:36px;
	background:url("img/searchBox.png") no-repeat;
	float:left;
	margin-right:12px;
}

#s{
	/* Поле текста поиска. */
	
	border:none;
	color:#888888;
	background:url("img/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;
}

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

Поле ввода текста  #s  имеет стиль с фоновым изображением и отступом, поэтому вводимый текст не перекрывает изображение увеличительного стекла.

styles.css – Часть 2

/* UL, который содержит иконки типов поиска */

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

.icons li{
	background:url("img/icons.png") no-repeat;
	float:left;
	height:19px;
	text-indent:-9999px;
	cursor:pointer;
	margin-right:5px;
}

/* Стили для каждой иконки */

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{
	/* Маленькая стрелка, которая перемещается под иконками */
	
	width:11px;
	height:6px;
	margin:21px 0 0 5px;
	position:absolute;
	background:url('img/arrow.png') no-repeat;
	left:0;
}


/* Кнопка Искать */


#submitButton{
	background:url('img/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;
}

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

Такая же техника со спрайтами используется для кнопки "Искать". Ее текст скрыт с помощью установки отрицательного значения свойству text-indent, и выводится изображение  buttons.png в качестве фона (верхняя часть изображения используется для обычного состояния, а нижняя для состояния hover).

styles.css – Часть 3

/* Результаты поиска: новости и веб страницы */


.webResult{ text-shadow:1px 1px 0 #586a75;margin-bottom:50px;}
.webResult h2{ 
	background-color:#5D6F7B;
	font-size:18px;
	font-weight:normal;
	padding:8px 20px;
	
	/* Используем закругленные углы CSS3 */
	-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:white;}
.webResult > a{ margin-left:20px;}


/* Результаты поиска: изображения и видео */


.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;
}

/* Кнопка _Показать еще_ */

#more{
	width:83px;
	height:24px;
	background:url('img/more.png') no-repeat;
	cursor:pointer;
	margin:40px auto;
}

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

В последнем фрагменте задаются стили для результатов поиска. Хотя мы используем четыре типа результатов поиска – страницы, новости, изображения и видео -  они все используют только два класса – .webResult и .imageResult. Также устанавливаются стили для кнопки #more, которая динамически добавляется jQuery  в зависимости от результатов, возвращаемых Google.

Поиск по сайту с использованием Google

 

jQuery

Как уже упоминалось выше, данное приложение использует API Google AJAX Search. Google имеет собственную библиотеку JavaScript, но если вы будете ее использовать, то будете ограничены интерфейса Google. Не смотря на хорошую функциональность, такой дизайн уместен не на всех сайтах. Поэтому в данном уроке используется "голая" версия с формированием запросов JSONp прямо к API Google.

Прежде чем разбирать код jQuery, нужно взглянуть на то, какие данные Google предоставляет нам после выполнения поиска с помощью API.

Пример результата, возвращаемого API Google

{
    "GsearchResultClass": "GwebSearch",
    "unescapedUrl": "http://tutorialzine.com/2010/02/html5-css3-website-template/",
    "url": "http://tutorialzine.com/2010/02/html5-css3-website-template/",
    "visibleUrl": "tutorialzine.com",
    "cacheUrl": "http://www.google.com/search?q=cache:_NSLxH-cQMAJ:tutorialzine.com",
    "title": "Coding a <b>CSS3</b> & <b>HTML5</b> One-Page Website Template | Tutorialzine",
    "titleNoFormatting": "Coding a CSS3 & HTML5 One-Page Website Template | Tutorialzine",
    "content": "Feb 16, 2010 <b>...</b> Here we are using the new version of HTML.."
}

Поиск, выполненный  помощью API, возвращает такой же результат, как и тот, который можно наблюдать на сайте Google. Разница заключается в том, что мы получаем массив JavaScript, который наполнен объектами, подобными выше приведенному примеру. Каждый такой объект содержит тип поиска, заголовок, URL и текст со страницы, которая содержит термины соответствующие условиям поиска.

Используя свойство GsearchResultClass  мы можем определить как нужно выводить информацию, которая получена в данный момент. В нашем примере поиск поддерживает только четыре типа - страницы, новости, изображения и видео. Полный список доступных типов поиска можно увидеть в документации API Google AJAX Search.

script.js – Часть 1

$(document).ready(function(){
	
	var config = {
		siteURL		: 'ruseller.com',	// Сайт, на котором используется поиск
		searchSite	: true,
		type		: 'web',
		append		: false,
		perPage		: 8,			// Google допускает использовать максимум 8
		page		: 0				// Первая страница
	}
	
	// Маленькая стрелка, которая отмечает иконку типа поиска:
	var arrow = $('<span>',{className:'arrow'}).appendTo('ul.icons');
	
	$('ul.icons li').click(function(){
		var el = $(this);
		
		if(el.hasClass('active')){
			// Иконка уже активна, выходим
			return false;
		}
		
		el.siblings().removeClass('active');
		el.addClass('active');
		
		// Перемещаем стрелку под данную иконку
		arrow.stop().animate({
			left		: el.position().left,
			marginLeft	: (el.width()/2)-4
		});
		
		// Устанавливаем тип поиска
		config.type = el.attr('data-searchType');
		$('#more').fadeOut();
	});
	
	// Устанавливаем домен сайта как метку для первой радио кнопки:
	$('#siteNameLabel').append(' '+config.siteURL);
	
	// Маркируем радио кнопку поиска по сайту как активную:
	$('#searchSite').click();	
	
	// Маркируем иконку веб поиска как активную:
	$('li.web').click();
	
	// Устанавливаем фокус ввода в поле для ввода текста:
	$('#s').focus();

	$('#searchForm').submit(function(){
		googleSearch();
		return false;
	});
	
	$('#searchSite,#searchWeb').change(function(){
		// Ловим событие click на одной из радио кнопок.
		// config.searchSite примет значение либо true либо false.
		
		config.searchSite = this.id == 'searchSite';
	});

Объект config содержит опции общей конфигурации, такие как URL сайта, начальную страницу (используется при нумерации страниц), и тип поиска по умолчанию (поиск страниц). Google ограничивает выборку результатов поиска восемью пунктами в настоящее время, что достаточно для поиска страниц, но мало для поиска изображений. Будем надеяться, что Google увеличит пределы в будущем.

Чтобы интегрировать поиск на ваш сайт нужно заменить содержание свойства siteURL в объекте config адресом вашего сайта.

Когда передается форма, jQuery вызывает функцию googleSearch(), которая представлена ниже.

script.js – Part 2

	function googleSearch(settings){
		
		// Если никаких аргументов не было передано функции,
		// то будут использоваться значения по умолчанию из объекта конфигурации:
		
		settings = $.extend({},config,settings);
		settings.term = settings.term || $('#s').val();
		
		if(settings.searchSite){
			// Используем  опцию для Google site:example.com для ограничения поиска
			// по определенному домену:
			settings.term = 'site:'+settings.siteURL+' '+settings.term;
		}
		
		// URL API Google AJAX Search
		var apiURL = 'http://ajax.googleapis.com/ajax/services/search/'+settings.type+'?v=1.0&callback=?';
		var resultsDiv = $('#resultsDiv');
		
		$.getJSON(apiURL,{q:settings.term,rsz:settings.perPage,start:settings.page*settings.perPage},function(r){
			
			var results = r.responseData.results;
			$('#more').remove();
			
			if(results.length){
				
				// Если результат был возвращен, добавляем его к элементу div pageContainer,
				// который затем добавлет его к #resultsDiv:
				
				var pageContainer = $('<div>',{className:'pageContainer'});
				
				for(var i=0;i<results.length;i++){
					// Создаем новый объект результата и запускаем его метод toString:
					pageContainer.append(new result(results[i]) + '');
				}
				
				if(!settings.append){
					// Данный код выполняется, если запускается новый поиск 
					// вместо нажатия на кнопку _Показать еще_:
					resultsDiv.empty();
				}
				
				pageContainer.append('<div class="clear"></div>')
							 .hide().appendTo(resultsDiv)
							 .fadeIn('slow');
				
				var cursor = r.responseData.cursor;
				
				// Проверяем, имеются ли еще страницы с результатами поиска, 
				// и определяем, показывать ли кнопку _Показать еще_:
				
				if( +cursor.estimatedResultCount > (settings.page+1)*settings.perPage){
					$('<div>',{id:'more'}).appendTo(resultsDiv).click(function(){
						googleSearch({append:true,page:settings.page+1});
						$(this).fadeOut();
					});
				}
			}
			else {
				
				// В данном поиске не было найдено ничего.
				
				resultsDiv.empty();
				$('<p>',{className:'notFound',html:'По вашему запросу ничего не найдено!'}).hide().appendTo(resultsDiv).fadeIn();
			}
		});
	}

Функция googleSearch() отправляет запрос JSONp к API Google, генерирует разметку для вывода результатов поиска, и вставляет их в div #resultsDiv. Она может либо предварительно удалить содержимое div (если мы делаем новый поиск), либо добавить результаты к уже имеющимся (в случае, если нажата кнопка “Показать еще”).

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

Результат поиска

script.js – Часть 3

	function result(r){
		
		// Это определение класса. Объект данного класса создается для каждого результата поиска.
		// Разметка генерируется методом .toString().
		
		var arr = [];
		
		// GsearchResultClass передается из API Google
		switch(r.GsearchResultClass){

			case 'GwebSearch':
				arr = [
					'<div class="webResult">',
					'<h2><a href="',r.unescapedUrl,'" target="_blank">',r.title,'</a></h2>',
					'<p>',r.content,'</p>',
					'<a href="',r.unescapedUrl,'" target="_blank">',r.visibleUrl,'</a>',
					'</div>'
				];
			break;
			case 'GimageSearch':
				arr = [
					'<div class="imageResult">',
					'<a target="_blank" href="',r.unescapedUrl,'" title="',r.titleNoFormatting,'" class="pic" style="width:',r.tbWidth,'px;height:',r.tbHeight,'px;">',
					'<img src="',r.tbUrl,'" width="',r.tbWidth,'" height="',r.tbHeight,'" /></a>',
					'<div class="clear"></div>','<a href="',r.originalContextUrl,'" target="_blank">',r.visibleUrl,'</a>',
					'</div>'
				];
			break;
			case 'GvideoSearch':
				arr = [
					'<div class="imageResult">',
					'<a target="_blank" href="',r.url,'" title="',r.titleNoFormatting,'" class="pic" style="width:150px;height:auto;">',
					'<img src="',r.tbUrl,'" width="100%" /></a>',
					'<div class="clear"></div>','<a href="',r.originalContextUrl,'" target="_blank">',r.publisher,'</a>',
					'</div>'
				];
			break;
			case 'GnewsSearch':
				arr = [
					'<div class="webResult">',
					'<h2><a href="',r.unescapedUrl,'" target="_blank">',r.title,'</a></h2>',
					'<p>',r.content,'</p>',
					'<a href="',r.unescapedUrl,'" target="_blank">',r.publisher,'</a>',
					'</div>'
				];
			break;
		}
		
		// Метод toString.
		this.toString = function(){
			return arr.join('');
		}
	}
	
	
});

Данная функция действует как конструктор класса result.  Она получает объект, который возвращается из API Google (пример объекта демонстриовался в началае шага jQuery) и инициализирует arr в соответствии со значением GsearchResultClass. Заметьте, что arr определяется как массив, а не как строка. Так процесс протекает несколько быстрее, чем конкатентация строк между собой.

Внизу определения класса содержится метод toString(). Он вызывает внутренний метод массива join, который преобразует его в строку. toString() является магическим методом, который неявно вызывается при создании объекта результата в script.js – Часть 2.

Готово!

Заключение

Конфигурация данного приложения для организации поиска по вашему сайту выполняется изменением свойства siteURL объекта config в файле script.js.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tutorialzine.com/2010/09/google-powered-site-search-ajax-jquery/
Перевел: Сергей Фастунов
Урок создан: 17 Сентября 2010
Просмотров: 72699
Правила перепечатки


5 последних уроков рубрики "jQuery"

^ Наверх ^