Exemples de rappel de début de recherche
Le rappel search starting peut modifier la requête avant qu'elle ne soit utilisée pour la recherche. Le moteur de recherche programmable 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 de toute information disponible pour la fonction de rappel.
Le rappel search starting suivant décore chaque requête avec le jour de la semaine actuel.
<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>Cet exemple montre comment implémenter une fonctionnalité Recherches récentes à l'aide du rappel search starting.
Cette fonctionnalité capture les requêtes des utilisateurs lorsqu'une recherche est déclenchée et les stocke localement dans le navigateur. Ces requêtes sont ensuite affichées sous forme d'éléments cliquables, ce qui permet aux utilisateurs de répéter rapidement les recherches précédentes, améliorant ainsi la facilité d'utilisation et réduisant la saisie répétée.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:g9ckaktfipe"></script>
Définissez la fonction d'assistance pour stocker les recherches récentes dans localStorage, protégée par une vérification du consentement utilisateur :
// For this demo, consent is assumed to be granted.
// In production, integrate this with your site's Consent Management Platform (CMP).
window.__hasStorageConsent = true;
function hasStorageConsent() {
return window.__hasStorageConsent === true;
}
function saveRecentSearch(query) {
if (!query || !hasStorageConsent()) return;
let searches = [];
try {
searches = JSON.parse(localStorage.getItem("recentSearches")) || [];
} catch (e) {
console.warn("Invalid localStorage data, resetting:", e);
// searches remains [] to overwrite the corrupted data
}
searches = searches.filter(item => item !== query);
searches.unshift(query);
searches = searches.slice(0, 5);
try {
localStorage.setItem("recentSearches", JSON.stringify(searches));
} catch (e) {
console.warn("Unable to access localStorage:", e);
}
}
Enregistrez le rappel search starting. Les rappels doivent être enregistrés dans l'objet __gcse global avant le chargement de cse.js :
// Install the callback.
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
web: {
starting: function (gname, query) {
saveRecentSearch(query);
renderRecentSearches();
return query; // continue normal search
},
},
};
Définissez une fonction pour afficher les recherches récentes sous forme d'éléments cliquables et initialisez-la au chargement de la page :
function renderRecentSearches() {
const container = document.getElementById("recent-searches");
if (!container) return;
if (!hasStorageConsent()) {
container.innerHTML = "";
try {
localStorage.removeItem("recentSearches");
} catch(e) {}
return;
}
let searches = [];
try {
searches = JSON.parse(localStorage.getItem("recentSearches")) || [];
} catch (e) {
console.warn("Unable to access localStorage:", e);
}
container.innerHTML = "";
searches.forEach(q => {
const item = document.createElement("button");
item.type = "button";
item.textContent = q;
item.onclick = () => {
const input = document.querySelector("input.gsc-input");
const button = document.querySelector("button.gsc-search-button");
if (input) input.value = q;
if (button) button.click();
};
container.appendChild(item);
});
}
window.addEventListener("DOMContentLoaded", function () {
renderRecentSearches();
});
Incluez les éléments suivants dans le code HTML :
<style>
#recent-searches button {
display: inline-block;
margin-right: 8px;
margin-top: 4px;
padding: 2px 8px;
background-color: #f1f3f4;
border: 1px solid #dadce0;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
}
</style>
<div class="gcse-search"></div>
<div id="recent-searches"></div>
Limites
- Les données ne sont stockées que dans le navigateur (
localStorage) et nécessitent le consentement de l'utilisateur. - Elles ne sont pas partagées entre les appareils ni les utilisateurs.
- Effacées si le stockage sur le navigateur est effacé.
- Ne suit pas les recherches effectuées en dehors de cette page.
Exemples de rappel des résultats affichés
Le rappel des résultats affichés est utile pour modifier la page une fois qu'elle est remplie de résultats. Il est conçu pour faciliter la modification de l'affichage des résultats sans exiger que le rappel soit entièrement responsable de l'affichage des résultats.
Les exemples suivants illustrent deux applications du rappel de résultats affichés qui ne fonctionnent pas sur les résultats.
Ce rappel results rendered indique que nous affichons la dernière page de résultats et affiche une alerte pour rappeler à l'utilisateur qu'il est arrivé à 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>Cette démo de rappel results rendered augmente la taille de la 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'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>Ce rappel results rendered modifie les liens de page dans le "curseur" en remplaçant 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 les éléments suivants dans le code HTML :
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Exemples de rappels de résultats prêts
Ce rappel met en forme les résultats avec des arrière-plans clairs et foncés en alternance.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>Remarque : Ce code est écrit en JavaScript/ES6. Il s'exécutera sur la plupart des navigateurs, mais devra être converti en 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 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 consiste à afficher les résultats de recherche dans un format difficile à obtenir à l'aide du rappel results rendered pour ajuster le code HTML. Le rappel results ready commence par un div vide.
Un exemple du document sur l'API Search Element montrait 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ésultat du rappel results ready et les transmettre au rappel results rendered, où elles peuvent être utilisées pour décorer l'affichage des résultats standards.
Le rappel results ready suivant montre que les résultats de recherche ne doivent pas nécessairement être une liste de résultats. Il remplace l'affichage normal des résultats de recherche par un nuage de mots issus des titres et du contenu des résultats. Lorsque la liste des résultats n'est 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 souhaité par 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 s'exécutera sur la plupart des navigateurs, mais devra être converti en 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 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 results ready et results rendered peuvent être utilisés conjointement pour transmettre des informations du premier au second. Par exemple, les informations contenues dans le tableau des objets de résultat sont disponibles pour le rappel results ready, mais pas pour le rappel results rendered. En enregistrant ces informations dans un tableau dans le cadre du rappel results ready, nous pouvons les rendre accessibles au rappel results rendered.
Par exemple, il est possible de contourner le panneau d'aperçu qui s'affiche lorsqu'un résultat d'image est sélectionné. Avec un rappel en deux parties, nous pouvons faire en sorte que les résultats d'images renvoient directement aux sites Web correspondants au lieu d'afficher un aperçu de l'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 les éléments suivants dans le code HTML :
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>