Implémenter le champ de recherche

Une fois que vous avez créé votre Programmable Search Engine, vous pouvez ajouter le Programmable Search Element à votre site. Pour ce faire, vous devez copier du code et le coller dans le code HTML de votre site, là où vous souhaitez que le moteur de recherche apparaisse.

  1. Dans le panneau de configuration, cliquez sur le moteur de recherche que vous souhaitez utiliser.
  2. Dans la section Basic (Basique) de la page Overview (Vue d'ensemble), cliquez sur Get code (Obtenir le code). Copiez le code, puis collez-le dans le code HTML source de votre page, à l'endroit où vous souhaitez que le Programmable Search Element s'affiche.

L'élément <div class="gcse-search"></div> est un espace réservé. C'est là que l'élément de recherche (champ de recherche et résultats de recherche) s'affiche.

<!-- Insérez ici votre propre ID Programmable Search Engine --> &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>

Essayer différentes mises en page

Dans de nombreux cas, il est judicieux d'afficher un champ de recherche indépendamment des résultats de recherche. La mise en page en deux colonnes vous permet d'afficher un champ de recherche dans une zone de votre page (par exemple, dans la barre latérale) et d'afficher les résultats dans une autre (par exemple, la zone principale de la page).

Pour modifier la disposition de votre moteur, accédez à la section Mise en page de la page Apparence dans le panneau de configuration. Après avoir sélectionné et enregistré la mise en page en deux colonnes dans le panneau de configuration, vous devez également modifier le code HTML de l'élément de recherche.

<!-- Insérez ici votre propre ID Programmable Search Engine --> &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>

Une autre mise en page intéressante est l'option sur deux pages. Elle vous permet d'implémenter votre propre champ de recherche sur une page et d'afficher les résultats de recherche standards sur une autre page à l'aide des paramètres de la barre d'adresse.

Sélectionnez et enregistrez la mise en page sur deux pages dans le panneau de configuration. Sur une page, implémentez un champ de recherche autonome en modifiant l'attribut resultsUrl pour qu'il pointe vers l'URL où vous souhaitez afficher les résultats.

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

Essayer

Pour implémenter une page de résultats de recherche autonome, collez l'extrait de code correspondant sur votre page de résultats:

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

Vous pouvez à présent afficher des résultats de recherche sur cette page en transmettant un "q" dans l'URL:

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

Notez le paramètre q=myQuery dans la barre d'adresse. Il permet à l'élément <div class="gcse-searchresults-only"></div> de savoir quels résultats de requête afficher.

Essayer

Suivant...

Passez à la section Activer la saisie semi-automatique.