Поиск на сайте от Google с помощью jQuery

Одной из наиболее востребованных тем является создание поиска по сайту. Первый способ – создать его самостоятельно “с нуля”. То есть использовать серверный язык программирования, например PHP, и составлять поисковые запросы к базе данных сайта, показывая результаты пользователю.

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

Пример Скачать (.zip, 25 Кб)

HTML-код

Давайте начнём с HTML-разметки. После объявления нового HTML5 doctype мы устанавливаем заголовок страницы и подключаем CSS-стили внутри тега head.

search.html

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

Внутри формы находится текстовый input, ниже которого расположена группа radio-переключателей для поиска внутри сайта и по всему интернету. Для изменения типа поиска используются стильные иконки. В самом конце страницы мы подключаем библиотеку jQuery и скрипт script.js, о котором вы узнаете в заключительном шаге этого урока.

Google Powered Site Search

CSS-код

CSS-стили находятся в файле styles.css. В листингах ниже представлены только самые интересные фрагменты.

styles.css – Часть 1

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

Текстовый input c id равным #s стилизирован с помощью фонового изображения и отступов таким образом, чтобы вводимый текст не наплывал на увеличительное стекло.

styles.css – Часть 2

Во фрагменте кода выше вы можете увидеть, что все иконки для переключения типа поиска используют одно общее фоновое изображение. Для каждой иконки задаётся правило background-position так, чтобы соответствующая часть изображения показывалась для обычного состояния и при наведении курсора мыши.

Такая же техника используется для кнопки отправки формы.

styles.css – Часть 3

В последнем фрагменте CSS-кода мы стилизуем получаемые результаты. Несмотря на то, что у нас возможны четыре типа результатов – веб-страницы, новости, изображения и видео, нужный внешний вид достигается использованием всего двух классов — .webResult и .imageResult. В конце мы задаём стили для кнопки #more, которая динамически добавляется на страницу в зависимости от результатов, возвращаемых Google.

jQuery & JSONp Google API Site Search

jQuery-код

Как было сказано в начале урока, поиск который мы создаём, использует AJAX Search API от Google. Google предоставляет свою собственную JavaScript библиотеку, но если Вы решите её использовать, то будете ограничены стандартным графическим интерфейсом. Скорее всего, это не то, что бы вы хотели предоставить своим посетителям. Именно поэтому в этом уроке мы используем “голую версию” с прямыми JSONp-вызовами с помощью jQuery прямо к их API.

Перед тем как начать обзор jQuery-кода, давайте взглянем на данные, которые нам предоставляет Google посредством своего API.

Пример результирующих данных от API

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

script.js – Часть 1

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

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

Для внедрения этого поиска в ваш сайт просто замените значение свойства siteURL в объекте config на URL-адрес вашего сайта.

script.js – Часть 2

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

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

Web Search Results

script.js – Часть 3

Эта функция работает конструктором класса result. Она принимает объект, возвращенный Google API (его пример представлен в начале раздела с jQuery-кодом) и инициализирует переменную arr в соответствии со значением свойства GsearchResultClass. Обратите внимание, что переменная arr – это массив. С массивом работать немного быстрее, чем делать конкатенации строк.

В конце функции находится метод toString(), который в свою очередь использует внутренний метод join() и конвертирует массив в строку.

Вот теперь наш собственный поиск от Google готов!

Выводы

Настроить это приложение для поиска по вашему собственному сайту очень просто. Просто измените значение свойства siteURL в объекте config в файле script.js. Существует много вариантов для улучшения этого примера. В данный момент используются не все данные, которые возвращаются от Google в качестве ответа. Также можно использовать модификатор filetype: для поиска по конкретному типу файла.

Если у вас есть какие-то интересные идеи по улучшению поиска – добро пожаловать в комментарии!


3 комментарий на “Поиск на сайте от Google с помощью jQuery

  1. С осени гугл уже не поддерживает старый API, хотя еще выдает по таким запросам ответы, но уже не полные.

    Пришлось доработать под новый API, с двумя ключами, но функциональная основа тут все равно отличная, взял из этой статьи, спасибо)

Оставить комментарий