Google AJAX Search API. Руководство.

Продолжаю тему Google AJAX API. На этот раз мы будем работать с поиском от google. Google AJAX API позволяет взаимодействовать с поиском Google, не заходя на сайт google.com.

Работа с Google AJAX Search API, как и со всеми другими API, будет осуществляться через специальные js-классы. Эти классы будут асинхронно отправлять на google строку поиска и возвращать результаты поиска в формате JSON. Такой подход позволяет легко интегрировать поиск от google в любой веб-сайт.

Кроме формата JSON для поиска можно использовать стандартные элементы управления от google. Приведу сразу пример использования этого класса.

<html>
  <head>
    <script src="https://www.google.com/jsapi?key=KEY"
        type="text/javascript"></script>
    <script type="text/javascript">
      google.load("search", "1");
      // Эта функция будет вызвана сразу после загрузки страницы
      function initialize() {
        var searchControl = new google.search.SearchControl();
        searchControl.addSearcher(new google.search.WebSearch());
        searchControl.draw(document.getElementById("searchcontrol"));
      }
      google.setOnLoadCallback(initialize);
    </script>
  </head>
  <body>
    <div id="searchcontrol"></div>
  </body>
</html>

Как видите все довольно просто. В этом коде следует обратить внимание на несколько важных моментов.

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

Во-вторых, в текущем коде используется только обычный поиск web. Кроме обычного поиска можно добавлять и другие места для поиска, например видео, новости и т.д.
Делается это методом addSearcher класса SearchControl:

…
// create a search control
var searchControl = new GSearchControl(null);
// add in a full set of searchers
searchControl.addSearcher(new GlocalSearch());
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
searchControl.addSearcher(new GnewsSearch());
searchControl.addSearcher(new GimageSearch());
searchControl.addSearcher(new GbookSearch());
searchControl.addSearcher(new GpatentSearch());
…

В-третьих, в результате работы этого примера, все результаты появятся на странице в стандартном оформлении (будут использованы стандартные стили оформления от google).
Проблему оформления можно решить двумя способами.

Отключить стандартные стили в поиске
Изменить модель отображения
Использовать другую схему работы с поиском

Отключение стилей

Для отключения стандартных стилей в поиске, необходимо указать специальную опцию nocss загрузчику модуля поиска:

google.load("search", "1", {nocss:true});

Кроме этой опции для поиска можно указывать язык интерфейса:
{“language” : “ru”}

По-умолчанию Google определяет Ваш язык самостоятельно по IP.

После этого, в выводе результатов через FireBug можно посмотреть какая разметка и какие классы используются в списке, и написать для этих классов свои стили. Каждый результат состоит из нескольких частей: заголовок, краткое описание, ссылка на сайт. Каждый из элементов заключен в отдельный div с отдельным классом. Вобщем, там все просто – Вы и сами разберетесь.

Изменение моделей отображения

Для того, чтобы не всем приходилось работать с “сырыми” данными результатов поиска (это и будет другой схемой работы, о которой я расскажу позже), google предоставляет некоторый инструментарий для изменения вида элементов поиска.

Здесь внешним видом руководит метод и класс google.search.drawOptions(). Изменения можно сделать двух видов: изменить весь лейаут, либо отсоединить форму поиска от списка результатов.

Например, изменим обычный лейаут на табовый:

// создаем объект drawOptions
var drawOptions = new GdrawOptions();
// указываем опцию табового отображения результатов
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
// указываем область, где отобразить весь поиск
searchControl.draw(document.getElementById("searchcontrol"), drawOptions);

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

Теперь попробуем отсоединить форму поиска от списка результатов:

// создаем объект drawOptions
var drawOptions = new GdrawOptions();
// указываем элемент, в который нужно отобразить форму поиска
drawOptions.setSearchFormRoot(document.getElementById("searchForm"));
// указываем элемент, в который отображать результаты поиска
searchControl.draw(document.getElementById("searchcontrol"), drawOptions);

Все довольно просто. Пример можно увидеть здесь

Еще одна деталь, которая сразу примечается после начала пользования таким поиском от google – это то, что не все результаты отображаются сразу, а только первый из них для каждого вида поиска. Конечно же, есть кнопки, по нажатию на которые можно отобразить весь список, но лучше делать список таким, по-умолчанию. Сделать это просто, достаточно передать нужные параметры методу addSearcher, при добавлении видов поиска.

// создаем объект – опции поиска
var options = new GsearcherOptions();
options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
// добавляем опции при добавлении поиска
searchControl.addSearcher(new GwebSearch(), options);

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

На этом список опций для видов поиска не заканчивается. Есть возможность разместить каждый вид поиска в отдельном элементе.

// создаем объект – опции вида поиска
var options = new GsearcherOptions();
// указываем вид отображения (раскрыт полностью)
options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
// указываем элемент внутри которого выводить этот вид поиска
options.setRoot(document.getElementById("somewhere_else"));
// добавляем поиск
searchControl.addSearcher(new GwebSearch(), options);

Другая схема работы с поиском

Здесь мы будем работать уже своим js, а не тем, что предоставляет нам google. Суть этого метода заключается в том, чтобы отправить на google текст запроса, а ответ получить в формате JSON.

Реализовать этот метод можно на jQuery. И понадобятся нам только две функции.

<script>
// callback function
function GoogleCallback (func, data) {
	window[func](data);
}
// change key!!!
$.getJSON("https://ajax.googleapis.com/ajax/services/search/web?v=1.0?key=YOUR_KEY&q=PHP&callback=GoogleCallback&context=?",
function(data){
	var ul = document.createElement("ul");
	$.each(data.results, function(i, val){
		var li = document.createElement("li");
        li.innerHTML = '<a href="'+val.url+'" title="'+val.url+'" target="_blank">'+val.title+"</a> - "+val.content;
        ul.appendChild(li);
	});
    $('body').html(ul);
});
</script>

Пример взят на сайте Антона Шевчука. Обратите внимание на промежуточную callback функцию GoogleCallback – она необходимо для корректной работы jQuery со скриптами от google. Во второй функции при выводе видно, что для каждого результата доступен некоторый набор полей вроде url, title и т.д. Полное описание этих полей можно найти на на сайте google : https://code.google.com/apis/ajaxsearch/documentation/reference.html#_intro_GResult.

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

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

А пока, у меня все. Удачи.

Теги: google ajax search api

Читайте также:

9 Ответов на “Google AJAX Search API. Руководство.”

lexx

Меня давно мучает вопрос, а можно ли организовать поиск только скажем по 20 сайтам который нам интересны, в доках видел, что с 1 сайтом можно, а вот скажем если их 20
cryptus

Можно. Делается по такому же принципу как и для одного сайта - через наложение ограничений для поисковых объектов. Вот пример:

var siteSearch = new google.search.WebSearch();
siteSearch.setUserDefinedLabel(“Amazon.com”);
siteSearch.setUserDefinedClassSuffix(“siteSearch”);
siteSearch.setSiteRestriction(“amazon.com”);
searchControl.addSearcher(siteSearch);

Здесь в объект searchControl добавляется поиск по сайту Amazon.com. После этого можно сразу добавить поиск по сайту microsoft.com, например:

var siteSearch2 = new google.search.WebSearch();
siteSearch.setUserDefinedLabel(“Microsoft.com”);
siteSearch.setUserDefinedClassSuffix(“siteSearch”);
siteSearch.setSiteRestriction(“microsoft.com”);
searchControl.addSearcher(siteSearch);

и т.д.
antf

Здравствуйте.
Проблема в том, что по определенному запросу у меня находится только 3 страницы, а при клике на ссылку “дополнительные результаты” (ведет на Google) выдает 36 страниц. что Можно ли сделать отображение результатов поиска сразу с дополнительными результатами?
Елена

Вот вы здесь описали как интегрировать поиск от google на сайт, но вы бы не могли объяснить, как прикрепить поиск к обычной программе, например написанной на C#?
Виталий

Приветствую! Я хотел бы узнать о возможностях редактирования шаблона такой выдачи на своем сайте, есть ли возможность ее редактировать?

Спасибо
delaf

Сделайте пожалуйста рабочий комплекс файлов, который можно закинуть на сайт и посмотреть работоспособность!
Google AJAX Search API. Руководство. | Разработка программного обеспечения

[…] Далее… […]
Сергий

Интересно, а где посмотреть описание JSON вывода?
wikitest

Какого хрена скопировать нельзя?!
Идиотизм же

От новичка до профессионала

Рубрики

Популярное

Последние записи

Google AJAX Search API. Руководство.

9 Ответов на “Google AJAX Search API. Руководство.”