Cómo implementar el cuadro de búsqueda

Una vez que hayas creado tu Motor de Búsqueda Programable, podrás agregar el Elemento de Búsqueda Programable a tu sitio. Para ello, deberás copiar parte del código y pegarlo en el código HTML de tu sitio en el que deseas que aparezca el motor de búsqueda.

  1. En el Panel de control, haz clic en el motor de búsqueda que deseas utilizar.
  2. En la sección Básico de la página Descripción general, haz clic en Obtener código. Copia el código y pégalo en el código fuente HTML de tu página donde quieras que aparezca el Elemento de Búsqueda Programable.

El elemento <div class="gcse-search"></div> es un marcador de posición. Aquí es donde se renderizará el elemento de búsqueda (tanto el cuadro de búsqueda como los resultados de la búsqueda).

<!-- Inserta tu propio ID del Motor de Búsqueda Programable aquí --> &lt;script async src=&quot;https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga&quot;&gt;&lt;/script&gt; 
<div class="gcse-search"></div>

Probar diferentes diseños

En muchas ocasiones, tiene sentido que el cuadro de búsqueda aparezca independientemente de los resultados de la búsqueda. Un diseño de dos columnas te permite renderizar un cuadro de búsqueda en un área de la página (por ejemplo, en la barra lateral) y mostrar los resultados en otra (por ejemplo, el área principal de la página).

Para cambiar el diseño de tu motor, ve a la sección Diseño de la página Aspecto y estilo en el Panel de control. Después de seleccionar y guardar el diseño de 2 columnas en el Panel de control, también debe cambiar el código HTML del elemento de búsqueda.

<!-- Inserta tu propio ID del Motor de Búsqueda Programable aquí --> &lt;script async src=&quot;https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga&quot;&gt;&lt;/script&gt; 
<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>

Otro diseño interesante es la opción de dos páginas. Te permite implementar tu propio cuadro de búsqueda en una página y procesar los resultados de la búsqueda estándar en otra página usando parámetros de la barra de direcciones.

Selecciona y guarda el diseño de dos páginas en el Panel de control. En una página, implementa un cuadro de búsqueda independiente y cambia el atributo resultsUrl para que apunte a la URL en la que deseas mostrar los resultados.

<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>

Probar

Para implementar una página de resultados de búsqueda independiente, pega el fragmento de código de resultados en tu página de resultados:

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

Ahora puede pasar "q" para activar los resultados de la búsqueda en esta página argumento en la URL:

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

Observa el parámetro q=myQuery en la barra de direcciones. Así es como el elemento <div class="gcse-searchresults-only"></div> sabe qué resultados de la consulta mostrar.

Probar

Siguiente...

Continúa para habilitar la función de autocompletar.