Sunday, October 19, 2008

Ajax поиск в блоге. Google Ajax Search API.


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

Один из вариантов Google Ajax поиска можно увидеть в моем блоге. Он расположен в левом верхнем углу главной страницы, чуть ниже NavBar-а. Выглядит он посимпатичнее "традиционного" блока поиска. С результатами работать удобней, т.к. они как бы сдвигают сам блог вниз, и он не мешает с ними работать. Это, кстати, одна из причин, почему я разместил модуль поиска в таком, несколько нестандартном, месте. Радует то, что результаты можно отобразить как по одному в каждой категории, так и по несколько штук или же все. Управляется это в сером прямоугольнике рядом с названием категории. Когда много результатов можно упорядочить их по дате (колесико справа в строке с названием категории). Если свернуть результаты (треугольник слева), то отобразится их число. И конечно поиск можно "очистить" удалив все результаты. Это делает крестик справа от кнопки "Поиск".

Есть несколько вариантов оформления результатов поиска. Например, оформление в виде вкладок, размещение результатов на "одном" экране, на карте и.т.д. Я объединил 2 варианта поиска для своего блога.

Чтобы сделать аналогичный поиск у себя надо первоначально получить для своего сайта API key. Делается это на ... этой странице. Не забудьте поставить галочку, что вы согласны с условиями использования, и ввести адрес сайта. Далее увидите три поля. В первом будет сам ключ API. Зайдите в управление блогом: Макет-> Шаблон -> Изменить HTML. Перед внесением изменений в
шаблон сделайте его резервную копию. Между тегами <head> и </head>, в том месте шаблона где вы хотите чтобы располагался поиск, вставьте следующий код, заменив ***API***KEY*** на свой ключ.


<script src='http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key=***API***KEY***' type='text/javascript'/>
<script language='Javascript' type='text/javascript'>
//<![CDATA[

function OnLoad() {
// Create a search control
var searchControl = new GSearchControl();

// site restricted web search with custom label
// and class suffix
var siteSearch = new GwebSearch();
siteSearch.setUserDefinedLabel("NarrowStripBlog");
siteSearch.setUserDefinedClassSuffix("siteSearch");
siteSearch.setSiteRestriction("narost.blogspot.com");

searchControl.addSearcher(siteSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GblogSearch());
searchControl.addSearcher(new GnewsSearch());

// tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"));

}

GSearch.setOnLoadCallback(OnLoad);
//]]>
</script>


Между тегами <body>и </body> вставьте код:
<div id='searchcontrol'>Loading</div>

Оригинальное документация как создать Google-овский Ajax поиск находится на этой страничке. Здесь достаточно подробно всё описано (Eng). Создай свой поиск! Удачи!Narrow Strip Blog









































No comments: