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