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

Cette page contient divers exemples d'utilisation des rappels de l'élément de recherche. Elles complètent des exemples de la section Rappels de la Document de l'API Search Element.

Rechercher des exemples de rappel de démarrage

Le rappel search start peut modifier la requête avant de l'utiliser 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 le rappel .

Le rappel search start suivant décore chaque requête avec la date du jour de la semaine.

<ph type="x-smartling-placeholder">
</ph> Rechercher un exemple de rappel de démarrage 
<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 les éléments suivants dans le code HTML:

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

Exemples de rappels renvoyés pour les résultats

Le rappel affiché avec les résultats est utile pour modifier la page après l'avoir remplie. Il est conçu pour faciliter la modification de l'affichage des résultats sans nécessiter le rappel pour assumer l'entière responsabilité de la présentation des résultats.

Les exemples suivants illustrent deux applications du rappel affiché dans les résultats qui n'interviennent pas sur les résultats.

<ph type="x-smartling-placeholder">
</ph> Identifier la page des derniers résultats

Ce rappel de résultats rendus remarque que nous affichons la dernière page. de résultats et une alerte s'affiche 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 les éléments suivants dans le code HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
<ph type="x-smartling-placeholder">
</ph> . Augmentation de la taille de la police du "curseur" liens

Cette démo de rappel resultsresults augmente la taille de police du "curseur" qui sélectionnent les pages de résultats.

La taille de police par défaut est de 12 pixels. Ici, nous l'augmentons à 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 les éléments suivants dans le code HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
<ph type="x-smartling-placeholder">
</ph> . Utiliser des lettres pour "Curseur" Étiquettes

Ce rappel resultsresults modifie les liens vers les pages dans le "curseur" des chiffres aux 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 les éléments suivants dans le code HTML:

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

Exemples de rappels prêts à l'emploi

<ph type="x-smartling-placeholder">
</ph> Afficher les résultats avec un arrière-plan de couleurs alternées

Ce rappel formate les résultats avec des arrière-plans clairs et sombres alternés. 

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

Remarque: Ce code est écrit en JavaScript/ES6. Il s'exécute sur la plupart des navigateurs, mais nécessite à la conversion en JavaScript/ES5 pour Internet Explorer et quelques autres des navigateurs. 

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 les éléments suivants 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 dans un format difficile à atteindre en utilisant le rappel resultsresults pour modifier le HTML. Le rappel résultats prêts commence par une valeur div vide. Un exemple dans le document API Search Element vous avez montré comment utiliser le rappel pour afficher une version très simple des résultats. Autre exemple vous avez montré comment conserver les données de résultats du rappel résultats prêts et les transmettre à Le rappel résultats affichés, qui peut être utilisé pour décorer les résultats standards l'écran.

Le rappel results ready (résultats prêts) suivant indique que les résultats de recherche n'ont pas besoin de une liste de résultats. Elle remplace l'affichage normal des résultats de recherche. avec un nuage de mots trouvés dans les résultats titres et contenus. Lorsque la liste des les résultats ne sont qu'une étape intermédiaire pour votre utilisateur, un rappel comme celui-ci peut contourner cette étape. et utiliser les résultats pour présenter le rapport que l'utilisateur souhaite.

<ph type="x-smartling-placeholder">
</ph> 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 s'exécute sur la plupart des navigateurs, mais nécessite en JavaScript/ES5 pour Internet Explorer et quelques autres des 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 les éléments suivants dans le code HTML:

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

Exemple de rappel en deux parties

Les rappels résultats prêts et résultats affichés peuvent être combinés pour transmettre des informations du premier au second. Par exemple, les informations contenues dans le tableau d'objets de résultat sont disponibles pour le rappel results ready, mais pas pour le rappel resultsresults. En enregistrant ces informations dans un tableau pour le rappel results ready, nous pouvons les rendre accessibles au rappel resultsresults.

Par exemple, cela permet de contourner le panneau d'aperçu qui s'affiche lorsque l'utilisateur clique sur un résultat d'image. Avec un rappel en deux parties, les résultats de recherche d'images peuvent rediriger directement les utilisateurs vers les sites Web correspondants au lieu d'afficher un aperçu de l'image lorsque l'utilisateur clique dessus.

<ph type="x-smartling-placeholder">
</ph> 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 les éléments suivants dans le code HTML:

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