Реализация окна поиска

После создания программируемой поисковой системы вы можете добавить на свой сайт элемент программируемого поиска. Для этого вам нужно скопировать некоторый код и вставить его в HTML-код вашего сайта, где вы хотите, чтобы отображалась ваша поисковая система.

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

Элемент <div class="gcse-search"></div> является заполнителем — здесь будет отображаться элемент поиска (как поле поиска, так и результаты поиска).

<!-- Введите сюда свой собственный идентификатор программируемой поисковой системы --> <script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script> 
<div class="gcse-search"></div>

Пробуем разные макеты

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

Чтобы изменить макет вашего движка, перейдите в раздел «Макет» на странице «Внешний вид» панели управления . После выбора и сохранения двухколоночного макета на панели управления вам также необходимо изменить HTML-код элемента поиска.

<!-- Введите сюда свой собственный идентификатор программируемой поисковой системы --> <script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script> 
<div style="border: 1px solid blue;">
    Area 1 (for example a sidebar)
    <div class="gcse-searchbox"></div>
</div>

<div style="border: 1px solid red;">
    Area 2 (for example main area of the page)
    <div class="gcse-searchresults"></div>
</div>

Еще один интересный макет — двухстраничный вариант. Это позволяет вам реализовать собственное окно поиска на одной странице и отображать стандартные результаты поиска на другой странице, используя параметры в адресной строке.

Выберите и сохраните двухстраничный макет в Панели управления. На одной странице реализуйте отдельное окно поиска, изменив атрибут resultsUrl , чтобы он указывал на URL-адрес, по которому вы хотите отображать результаты.

<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchbox-only" data-resultsUrl="YOUR_RESULTS_PAGE_URL"></div>

Попробуйте это

Чтобы реализовать отдельную страницу результатов поиска, вставьте фрагмент кода результатов на свою страницу результатов:

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

Теперь вы можете активировать результаты поиска на этой странице, передав аргумент «q» в URL:

https://my-results-page-url.com/?q=myQuery

Обратите внимание на параметр q=myQuery в адресной строке — благодаря ему элемент <div class="gcse-searchresults-only"></div> узнает, какие результаты запроса отображать.

Попробуйте это

Следующий...

Перейдите к включению автозаполнения .