Google имеет отличную библиотеку, которая помогает использовать возможности их мощного поискового механизма на любом сайте. В данном уроке мы расскажем, как ее использовать!
Пример использвоания API Google AJAX Search
Регистрируемся!
Для использования API Google AJAX Search необходимо зарегистрироваться и получить ключ API. Для каждого доменного имени выдается один ключ.
Регистрация для получения ключа API
HTML
Демонстрационная страница использует следующую разметку:
<!-- Форма поиска -->
<form action="http://www.google.com/search" method="get">
<!-- Поле поиска HTML5 -->
<input type="search" id="search-box" name="q" results="5" placeholder="Поиск..." autocomplete="on" />
<!-- ПОСИК только под домену ruseller.com -->
<input type="hidden" name="sitesearch" value="ruseller.com" />
<!-- SEARCH BUTTON -->
<input id="search-submit" type="submit" value="Искать" />
</form>
<!-- Элемент с резульататми поиска будет выводиться после данного div -->
<div id="search-area" style="position:relative;">
</div>
Используется обычная форма, так что пользователь, у которого будет отключен Javascript, будет просто перенаправлен на страницу Google с результатами его поиска. Также используются элементы HTML5 для текста замещения и включения автоподстановки для элемента ввода текста поиска.
CSS
/* Позиционирование результата */
#search-results {
position:absolute;
z-index:90;
top:40px;
left:10px;
visibility:hidden;
}
/* Треугольник! */
#search-results-pointer {
width:0px;
height:0px;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-bottom:20px solid #eee;
margin-left:10%;
}
/* Элемент DIV, который содержит результаты поиска! */
#search-results-content {
position:relative;
padding:20px;
background:#fff;
border:3px solid #eee;
width:380px;
min-height:200px;
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5)
}
Здесь просто выполняется позиционирование элемента для вывода результатов поиска. Также задается треугольник для улучшения внешнего вида.
Javascript
<!-- Подгружаем API Google AJAX Search и Mootools -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=ЗДЕСЬ_НАДО_ВСТАВИТЬ_КЛЮЧ_API_ДЛЯ_ВАШЕГО_САЙТА"></script>
<script type="text/javascript">
google.load('mootools','1.2.4');
google.load('search','1');
</script>
<script type="text/javascript">
window.addEvent('domready',function(){
/* Поиск */
var searchBox = $('search-box'), searchLoaded=false, searchFn = function() {
if(!searchLoaded) {
searchLoaded = true; // Загружать повторно ничего не надо!
//Строим элементы!
var container = new Element('div',{ id: 'search-results' }).inject($('search-area'),'after');
var wrapper = new Element('div',{
styles: {
position: 'relative'
}
}).inject(container);
new Element('div',{ id: 'search-results-pointer' }).inject(wrapper);
var contentContainer = new Element('div',{ id: 'search-results-content' }).inject(wrapper);
var closer = new Element('a', {
href: 'javascript:;',
text: 'Закрыть',
styles: {
position: 'absolute', //Положение ссылки "Закрыть"
bottom: 35,
right: 20
},
events: {
click: function() {
container.fade(0);
}
}
}).inject(wrapper);
//Создаем реализации классов Google
var search = new google.search.WebSearch(),
control = new google.search.SearchControl(),
options = new google.search.DrawOptions();
//Устанавливаем опции Google
options.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
options.setInput(searchBox);
//Устанавливаем опции поиска
search.setUserDefinedClassSuffix('siteSearch');
search.setSiteRestriction('ruseller.com');
search.setLinkTarget(google.search.Search.LINK_TARGET_SELF);
//Устанавливаем управление поиском
control.addSearcher(search);
control.draw(contentContainer,options);
control.setNoResultsString('Ничего не найдено.');
//Добавляем ловца событий
searchBox.addEvents({
keyup: function(e) {
if(searchBox.value && searchBox.value != searchBox.get('placeholder')) {
container.fade(0.9);
control.execute(searchBox.value);
}
else {
container.fade(0);
}
}
});
searchBox.removeEvent('focus',searchFn);
}
};
searchBox.addEvent('focus',searchFn);
});
</script>
Для начала подгружаются с сайта Google скрипт поиска (для которого надо указать ключ API, полученный при регистрации) и API Google AJAX Search и Mootools, который используется для создания некоторых элементов интерфейса.
Затем производятся три шага для задействования Google AJAX API:
Создаем элемент, который будет содержать результаты поиска.
Создаем ссылку "Закрыть", которая позволяет закрыть окно результатов поиска.
Создаем экземпляры классов для Google-поиска:
Поиск Web (вы также можете создать локальный поиск (LocalSearch) если хотите...). Опции google.search.WebSearch. Мы выбираем режим вывода со вкладками и использование нашего элемента формы в качестве элемента ввода.
Экземпляр SearchControl. Опции google.search.SearchControl. "siteSearch" - это суффикс для ограничения поиска. Мы ограничиваем поиск только доменом ruseller.com, а также будем выводить результаты в том же окне (вместо того, чтобы открывать новое).
Экземпляр DrawOptions. Опции google.search.DrawOptions. Мы устанавливаем управление поиском, устанавливаем контейнер для вывода результатов и опции для него, а также устанавливаем сообщение на случай отсутствия результатов поиска.
Как только управление поиском создано , нужно присоединить обработчик события к полю поиска, чтобы выводить и скрывать контейнер с результатами поиска на основании содержания поля ввода текста для поиска.
Библиотека MooTools используется для создания элемента, который содержит результаты поиска , ссылку "Закрыть", и привязки обработчика события к полю ввода текста для поиска. Вы можете использовать вместо нее Dojo или jQuery.