Поиск по сайту всегда является неотъемлемой его частью. Но если у вас нет поиска или стандартный поиск вас не устраивает, тогда данный урок именно для вас. В сегодняшнем уроке мы рассмотрим как создать отличный поиск по сайту с использованием отличный сервис google search. Преимущество такого поиска в том, что благодаря ему вы можете осуществить поиск не только текста но картинок и видео. Также вы можете выбрать где искать, на своем сайте, или поиск в интернете. Поисковиком достаточно просто пользоваться и внедрить в структуру сайта..

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

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

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

styles.css – Часть 1

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

styles.css – Часть 2

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

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

styles.css – Часть 3

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

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

script.js – Часть 1

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

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

script.js – Part 2

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

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

script.js – Часть 3

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

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

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