Plus d'exemples de rappel de l'élément de recherche

Cette page contient une série d'exemples d'utilisation des rappels de l'élément de recherche. Ils complètent les exemples trouvés dans la section Rappels du document de l'API Custom Search Element.

Rechercher des exemples de rappel de démarrage

Le rappel de démarrage de la recherche peut modifier la requête avant qu'elle ne soit utilisée pour la recherche. Programmable Search Engine peut être configuré pour inclure des termes prédéterminés dans la requête, mais ce rappel peut modifier la requête en fonction des informations disponibles pour la fonction de rappel.

Le rappel de départ de recherche suivant décore chaque requête avec le jour de la semaine en cours.

Exemple de rappel de démarrage de la recherche 
<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:g9ckaktfipe"></script>
const mySearchStartingCallback = (gname, query) => {
  const dayOfWeek = new Date().getDay();
  console.log(dayOfWeek);
  var days = {
        "0": "Sunday",
        "1": "Monday",
        "2": "Tuesday",
        "3": "Wednesday",
        "4": "Thursday",
        "5": "Friday",
        "6": "Saturday"
    };

    return query + ' ' + days[dayOfWeek];
};
// Install the callback.
window.__gcse || (window.__gcse = {});
  window.__gcse.searchCallbacks = {
    image: {
      starting: mySearchStartingCallback,
    },
    web: {
      starting: mySearchStartingCallback,
    },
};

Incluez ces éléments dans le code HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

Exemples de rappels d'affichage des résultats

Le rappel de rendu des résultats est utile pour modifier la page une fois qu'elle a été remplie de résultats. Il est conçu pour faciliter la modification de l'affichage des résultats, sans que le rappel n'ait à assumer l'entière responsabilité de l'affichage des résultats.

Les exemples suivants illustrent deux applications des rappels de résultats affichés qui n'interviennent pas sur les résultats.

Identifier la page des derniers résultats

Ce rappel résultats affichés remarque que nous affichons la dernière page de résultats et affiche une alerte pour rappeler à l'utilisateur qu'il a atteint la fin. 

<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
myWebResultsRenderedCallback = function(){
    var searchresults= document.getElementsByClassName("gsc-cursor-page");
    var index= document.getElementsByClassName("gsc-cursor-current-page");
    if(index.item(0).innerHTML == searchresults.length){
       alert("This is the last results page");
    }
};

Installer le rappel 

window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
      // Since the callback is in the global namespace, we can refer to it by name,
      // 'myWebResultsRenderedCallback', or by reference, myWebResultsRenderedCallback.
      rendered: myWebResultsRenderedCallback,
  },
};

Incluez ces éléments dans le code HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Augmenter la taille de la police des liens "curseur"

Cette démo de rappel des résultats affichés augmente la taille de police des numéros de "curseur" qui sélectionnent les pages de résultats.

La taille de police par défaut est de 12 pixels. Ici, nous l'agrandissons à 20 px. 

<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
myWebResultsRenderedCallback = function(){
   document.getElementsByClassName("gsc-cursor")[0].style.fontSize = '20px';
};

Installer le rappel 

window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
      // Since the callback is in the global namespace, we can refer to it by name,
      // 'myWebResultsRenderedCallback', or by reference, myWebResultsRenderedCallback.
      rendered: myWebResultsRenderedCallback,
  },
};

Incluez ces éléments dans le code HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Utiliser des lettres pour les libellés de "curseur"

Ce rappel rendu des résultats modifie les liens vers les pages dans le "curseur", qui remplace les chiffres par des lettres. 

<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
myWebResultsRenderedCallback = function(){
    var arr = document.getElementsByClassName('gsc-cursor-page');
    var alp = ['A','B','C','D','E','F','G','H','I','J','K','L',
      'M','N','O','p','Q','R','S','T','U','V','W','X','Y','Z'];
    for (var i = 0; i < arr.length; i++) {
        arr[i].innerHTML = alp[i];
    }
};

Installer le rappel 

window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
      // Since the callback is in the global namespace, we can refer to it by name,
      // 'myWebResultsRenderedCallback', or by reference, myWebResultsRenderedCallback.
      rendered: myWebResultsRenderedCallback,
  },
};

Incluez ces éléments dans le code HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

Exemples de rappels prêts pour les résultats

Afficher les résultats avec des arrière-plans de couleurs en alternance

Ce rappel formate des arrière-plans clairs et sombres en alternance. 

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

Remarque: Ce code est écrit en JavaScript/ES6. Il fonctionnera dans la plupart des navigateurs, mais devra être converti au format JavaScript/ES5 pour Internet Explorer et quelques autres navigateurs plus anciens. 

barredResultsRenderedCallback = function(gname, query, promoElts, resultElts){
  const colors = ['Gainsboro', 'FloralWhite'];
  let colorSelector = 0;
  for (const result of resultElts) {
    result.style.backgroundColor = colors[colorSelector];
    colorSelector = (colorSelector + 1) % colors.length;
  }
};
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
    rendered: barredResultsRenderedCallback,
  },
};

Incluez ces éléments dans le code HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

Nuage de mots

L'application évidente du rappel results ready est d'afficher les résultats de recherche dans un format qu'il serait difficile d'atteindre en utilisant le rappel results output (résultat de résultats) pour modifier le code HTML. Le rappel results ready (Résultats prêts) commence par un div vide. Un exemple dans le document de l'API Search Element a montré comment utiliser le rappel pour afficher une version très simple des résultats. Un autre exemple a montré comment conserver les données de résultats du rappel results ready et les transmettre au rappel results rendant l'affichage des résultats standard.

Le rappel results ready (Résultats prêts) suivant indique que les résultats de recherche n'ont pas besoin d'être une liste de résultats. Il remplace l'affichage normal des résultats de recherche par un nuage des mots figurant dans les titres et le contenu des résultats. Lorsque la liste des résultats n'est qu'une étape intermédiaire pour l'utilisateur, un rappel comme celui-ci peut contourner cette étape et utiliser les résultats pour présenter le rapport souhaité à l'utilisateur.

Créer un nuage de mots à partir du contenu des résultats de recherche 
<script async
      src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
<style>
  #container {
    width: 100%;
    height: 4.5in;
    margin: 0;
    padding: 0;
  }
</style>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-tag-cloud.min.js"></script>

Remarque: Ce code est écrit en JavaScript/ES6. Il fonctionnera dans la plupart des navigateurs, mais devra être converti au format JavaScript/ES5 pour Internet Explorer et quelques autres navigateurs plus anciens. 

const resultsReadyWordCloudCallback = function(
        name, q, promos, results, resultsDiv) {
    const stopWords = new Set()
      .add('a')
      .add('A')
      .add('an')
      .add('An')
      .add('and')
      .add('And')
      .add('the')
      .add('The');

    const words = {};
    const splitter = /["“”,\?\s\.\[\]\{\};:\-\(\)\/!@#\$%\^&*=\+\*]+/;
    if (results) {
        for (const {contentNoFormatting, titleNoFormatting} of results) {
            const wordArray = (contentNoFormatting + ' ' + titleNoFormatting)
              .split(splitter)
              .map(w => w.toLowerCase());
            for (const w of wordArray) {
                if (w && !stopWords.has(w)) {
                    words[w] = (words[w] + 1) || 1;
                }
            }
        }
    }
    const dataForChart = [];
    for (const key in words) {
        const val = words[key];
        dataForChart.push({
            'x': key,
            'value': val,
        });
    }

    const container = document.createElement('div');
    resultsDiv.appendChild(container);
    container.id = 'container';
    // create a tag (word) cloud chart
    const chart = anychart.tagCloud(dataForChart);
    // set a chart title
    chart.title(`Words for query: "${q}"`)
    // set an array of angles at which the words will be laid out
    chart.angles([0, 45, 90, 135])
    // display the word cloud chart
    chart.container(container);
    chart.draw();
    return true; // Don't display normal search results.
};
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
    web: {
        ready: resultsReadyWordCloudCallback,
    },
};

Incluez ces éléments dans le code HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

Exemple de rappel en deux parties

Les rappels results ready et results completed (résultats affichés) peuvent être utilisés conjointement pour transmettre des informations du premier au second. Par exemple, les informations du tableau d'objets de résultat sont disponibles pour le rappel results ready, mais pas pour le rappel results rendant l'affichage. En enregistrant ces informations dans un tableau via le rappel results ready, nous pouvons les rendre accessibles au rappel results rendu.

Vous pouvez par exemple contourner le panneau d'aperçu qui s'affiche lorsque l'utilisateur clique sur un résultat d'image. Grâce à un rappel en deux parties, nous pouvons faire en sorte que les résultats des images renvoient directement vers les sites Web correspondants au lieu d'afficher un aperçu d'image lorsque l'utilisateur clique dessus.

Ignorer les aperçus d'images 
<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:g9ckaktfipe"></script>
const makeTwoPartCallback = () => {
  let urls;
  const readyCallback = (name, q, promos, results, resultsDiv) => {
    urls = [];
    for (const result of results) {
      urls.push(result['contextUrl']);
    }
  };
  const renderedCallback = (name, q, promos, results) => {
    const removeEventListeners = element => {
      const clone = element.cloneNode(true);
      element.parentNode.replaceChild(clone, element);
      return clone;
    };
    for (let i = 0; i < results.length; ++i) {
      const element = removeEventListeners(results[i]);
      element.addEventListener('click', () => window.location.href = urls[i]);
    }
  };
  return {readyCallback, renderedCallback};
};
const {
  readyCallback: imageResultsReadyCallback,
  renderedCallback: imageResultsRenderedCallback,
} = makeTwoPartCallback();
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  image: {
    ready: imageResultsReadyCallback,
    rendered: imageResultsRenderedCallback,
  },
};

Incluez ces éléments dans le code HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>