Как добавить программируемый поиск от Google на свой сайт?

В этой статье мы разберём как на свой сайт добавить программируемый поиск от Google. Начнём мы этот процесс с создания поисковой системы посредством панели управления. После этого приступим к настройке данной системы. Завершим всё это дело, получением её кода и встраиванием его на свой сайт.

Что такое программируемая поисковая система Google?

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

Создание поисковой системы

Самый простой способ создать базовую поисковую систему – это воспользоваться панелью управления.

Для создания новой программируемой поисковой системы нажмём на кнопку «Добавить» и на открывшейся странице заполним форму. В ней укажем название поисковой системы, а также место, в котором нужно осуществлять поиск. В качестве варианта выберем «Поиск на определенных сайтах и веб-страницах», затем в поле «Укажите сайт или веб-страницы» введём нужный адрес (например, «itchief.ru») и нажмём кнопку «Добавить».

После этого при необходимости можно задать некоторые дополнительные настройки. Для завершения необходимо установить флажок "Я не робот" и нажать на кнопку «Создать».

После этого появится сообщение, что поисковая система создана.

Настройка внешнего вида

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

В качестве макета установим "Только результаты".

Добавление поисковой системы на свой сайт

На данном шаге встроим полученный HTML-код программируемого поиска Google на свой сайт. Осуществляется это посредством его вставки в нужное место HTML-страницы, в котором оно должно отображаться. Если вы забыли скопировать HTML-код этой системы, то получить его заново можно на странице «Обзор» посредством нажатия на ссылку «Получить код».

Код будет выглядеть примерно так:

<script async src="https://cse.google.com/cse.js?cx=a50c64a99584d4961"></script>
<div class="gcse-searchresults-only"></div>

Так как мы выбрали вариант поисковой системы только с отображением результатов, то нам необходимо будет дополнительно ещё сделать форму для ввода поискового запроса. Например, следующим образом (полный вариант HTML-страницы):

<h1>🔍 Поиск по сайту</h1>
<!-- Форма, содержащее поле поиска -->
<form class="search-form" action="#" method="GET">
  <label class="search-label" for="search-input">
    <svg xmlns="http://www.w3.org/2000/svg" focusable="false" width="16" height="16" fill="currentColor" class="search-image" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"></path></svg>
  </label>
  <input class="search-input" id="search-input" type="search" name="q" value="" placeholder="что хотите найти?">
  <button type="reset" class="search-reset" title="Очистить запрос" hidden>
    <svg width="20" height="20" viewBox="0 0 20 20"><path d="M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg>
  </button>
  <button class="search-submit" type="submit" tabindex="-1">Найти</button>
</form>
<div class="search-header">📢 Результаты поиска</div>
<div class="gcse-result">
  <!-- Место для отображения результатов поиска -->
  <div class="gcse-searchresults-only"></div>
</div>

<script async src="https://cse.google.com/cse.js?cx=a50c64a99584d4961"></script>

Для оформления внешнего вида этой веб-страницы создадим стили и подключим их к странице с помощью тега <link>:

<link rel="stylesheet" href="css/main.css">

Для того чтобы данная страница работала, мы напишем JavaScript код. С помощью него мы будем обрабатывать форму после ввода поискового запроса в форму и нажатия на кнопку «Найти». Чтобы это сделать мы назначим обработчик событию submit для <form>:

const { href } = window.location;
const url = new URL(href);
const form = document.querySelector('.search-form');
const input = form.querySelector('#search-input');
// назначаем обработчик событию submit для формы
form.addEventListener('submit', (e) => {
  // отменим отправку формы на сервер 
  e.preventDefault();
  // перезагрузим страницу
  window.location.href = `${url.origin}${url.pathname}?q=${encodeURIComponent(input.value.trim())}`;
});

В коде обработчика мы первым действием отменим отправку данной формы на сервер. После этого будем выполнять перезагрузку этой страницы, дополнив её URL-адрес GET-параметром q. В качестве значения этого параметра установим текст, которые мы ввели в поле <input>.

Например, после ввода запроса «JavaScript» и нажатия на кнопку «Найти», URL-страницы будет содержать параметр q с этим значением.

Далее всё выполняет скрипт https://cse.google.com/cse.js. Он читает значение GET-параметра q, отправляет запрос на сервер Google, получает ответ и выводит его результаты в HTML-элемент .gcse-searchresults-only.

Для того чтобы с формой было более комфортно работать напишем с помощью JavaScript (полный код) ещё логику для:

• отображения сообщения «Вы не ввели запрос в поисковую строку.», когда запрос пустой;
• переключения видимости кнопки, которая используется для очистки значения поля <input>, в зависимости от наличия в нём текста.

Теперь, когда запрос пустой мы увидим сообщение.

Все файлы этого проекта расположены на GitHub: https://github.com/itchief/ui-components/tree/master/search.