Ejemplos de devoluciones de llamada de inicio de la búsqueda
La devolución de llamada search starting puede modificar la búsqueda antes de que se use. El motor de búsqueda programable se puede configurar para incluir términos predeterminados en la búsqueda, pero esta devolución de llamada puede modificar la búsqueda según la información disponible para la función de devolución de llamada.
La siguiente devolución de llamada de inicio de búsqueda decora cada búsqueda con el día de la semana actual.
<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,
},
};Incluye estos elementos en el código HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>En este ejemplo, se muestra cómo implementar una función de Búsquedas recientes con la devolución de llamada de inicio de búsqueda.
La función captura las búsquedas de los usuarios cuando se activa una búsqueda y las almacena de forma local en el navegador. Luego, estas búsquedas se muestran como elementos en los que se puede hacer clic, lo que permite a los usuarios repetir rápidamente búsquedas anteriores, lo que mejora la usabilidad y reduce la escritura repetida.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:g9ckaktfipe"></script>
Define la función auxiliar para almacenar las búsquedas recientes en localStorage, protegida por una verificación del consentimiento del usuario:
// 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);
}
}
Registra la devolución de llamada de inicio de la búsqueda. Las devoluciones de llamada se deben registrar en el objeto global __gcse antes de cargar 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
},
},
};
Define una función para renderizar las búsquedas recientes como elementos en los que se puede hacer clic y, luego, inicialízala cuando se cargue la página:
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();
});
Incluye estos elementos en el código 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>
Limitaciones
- Los datos solo se almacenan en el navegador (
localStorage) y requieren el consentimiento del usuario. - No se comparten entre dispositivos ni usuarios.
- Se borra si se borra el almacenamiento del navegador.
- No hace un seguimiento de las búsquedas realizadas fuera de esta página.
Ejemplos de devoluciones de llamada de resultados renderizados
La devolución de llamada de resultados renderizados es útil para modificar la página después de que se completa con resultados. Está diseñado para facilitar la modificación de la visualización de los resultados sin necesidad de que la devolución de llamada asuma la responsabilidad total de renderizar los resultados.
En los siguientes ejemplos, se ilustran dos aplicaciones de la devolución de llamada renderizada de los resultados que no operan en los resultados.
Esta devolución de llamada de resultados renderizados observa que estamos mostrando la última página de resultados y muestra una alerta que le recuerda al usuario que llegó al final.
<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");
}
};Instala la devolución de llamada
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,
},
};Incluye estos elementos en el código HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Esta demostración de devolución de llamada de resultados renderizados aumenta el tamaño de fuente de los números del "cursor" que seleccionan páginas de resultados.
El tamaño de fuente predeterminado es de 12 px. Aquí, lo aumentamos a 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';
};Instala la devolución de llamada
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,
},
};Incluye estos elementos en el código HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Esta devolución de llamada de resultados renderizados cambia los vínculos de página en el "cursor" de números a letras.
<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];
}
};Instala la devolución de llamada
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,
},
};Incluye estos elementos en el código HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Ejemplos de devoluciones de llamada de Resultados listos
Esta devolución de llamada da formato a los resultados con fondos claros y oscuros alternados.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>Nota: Este código está escrito en JavaScript/ES6. Se ejecutará en la mayoría de los navegadores, pero deberá convertirse a JavaScript/ES5 para Internet Explorer y algunos otros navegadores más antiguos.
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,
},
};Incluye estos elementos en el código HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Nube de palabras
La aplicación obvia de la devolución de llamada results ready es mostrar los resultados de la búsqueda en un formato al que sería difícil llegar con la devolución de llamada results rendered para ajustar el código HTML. La devolución de llamada results ready comienza con un div vacío.
Un ejemplo del documento de la API de Search Element mostró cómo usar la devolución de llamada para renderizar una versión muy simple de los resultados.
Otro ejemplo mostró cómo conservar los datos de resultados de la devolución de llamada results ready y pasarlos a la devolución de llamada results rendered, en la que se pueden usar para decorar la pantalla de resultados estándar.
La siguiente devolución de llamada results ready muestra que los resultados de la búsqueda no tienen que ser una lista de resultados. Reemplaza la visualización normal de los resultados de la búsqueda por una nube de palabras que incluye las palabras que se encuentran en los títulos y el contenido de los resultados. Cuando la lista de resultados es solo un paso intermedio para el usuario, una devolución de llamada como esta puede omitir esa etapa y usar los resultados para presentar el informe que el usuario desea.
<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>Nota: Este código está escrito en JavaScript/ES6. Se ejecutará en la mayoría de los navegadores, pero deberá convertirse a JavaScript/ES5 para Internet Explorer y algunos otros navegadores más antiguos.
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,
},
};Incluye estos elementos en el código HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Ejemplo de devolución de llamada de dos partes
Las devoluciones de llamada results ready y results rendered se pueden usar en combinación para pasar información de la primera a la segunda. Por ejemplo, la información del array de objetos de resultado está disponible para la devolución de llamada results ready, pero no para la devolución de llamada results rendered. Si guardamos esa información en un array como parte de la devolución de llamada results ready, podemos hacer que esté disponible para la devolución de llamada results rendered.
Un ejemplo de esto es omitir el panel de vista previa que se muestra cuando se hace clic en un resultado de imagen. Con una devolución de llamada de dos partes, podemos hacer que los resultados de imágenes vinculen directamente a los sitios web correspondientes en lugar de mostrar una vista previa de la imagen cuando se hace clic en ella.
<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,
},
};Incluye estos elementos en el código HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>