Cómo buscar ejemplos de devolución de llamada de inicio
La devolución de llamada de inicio de la búsqueda puede modificar la consulta antes de que se use para la búsqueda. El Motor de Búsqueda Programable se puede configurar para que incluya términos predeterminados en la consulta, pero esta devolución de llamada puede modificar la consulta en función de cualquier información disponible para la función de devolución de llamada.
La siguiente devolución de llamada de inicio de la búsqueda decora cada consulta 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 archivo HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Ejemplos de devoluciones de llamada renderizadas de resultados
La devolución de llamada renderizada de resultados es útil para modificar la página después de que se completa con resultados. Está diseñada para facilitar la modificación de la visualización de resultados sin que la devolución de llamada asuma toda la responsabilidad de renderizar los resultados.
En los siguientes ejemplos, se ilustran dos aplicaciones de la devolución de llamada renderizada de resultados que no funcionan en los resultados.
Esta devolución de llamada de resultados renderizados detecta que se muestra la última página de resultados y aparece 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");
}
};Cómo instalar 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 archivo HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Esta demostración de devolución de llamada Resultados renderizados aumenta el tamaño de fuente de los números de "cursor" que seleccionan páginas de resultados.
El tamaño de fuente predeterminado es de 12 px. Aquí, 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';
};Cómo instalar 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 archivo HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Esta devolución de llamada representado de los resultados cambia los vínculos de la 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];
}
};Cómo instalar 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 archivo HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Ejemplos de devolución de llamada de resultados listos
Esta devolución de llamada da formato a los resultados con fondos claros y oscuros alternativos.
<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 en algunos otros navegadores anteriores.
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 archivo HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Nube de palabras
La aplicación obvia de la devolución de llamada Resultados listos es mostrar los resultados de la búsqueda en un formato difícil de alcanzar mediante la devolución de llamada Resultados renderizados para ajustar el HTML. La devolución de llamada Resultados listos comienza con un div vacío.
En un ejemplo del documento API de Search Element, se mostró cómo usar la devolución de llamada para renderizar una versión muy simple de los resultados.
En otro ejemplo, se mostró cómo conservar los datos de la devolución de llamada Resultados listos y pasarlos a la devolución de llamada Resultados renderizados, donde se pueden usar para decorar la pantalla de resultados estándar.
La siguiente devolución de llamada Resultados listos 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 de las palabras encontradas en los títulos y el contenido de los resultados. Cuando la lista de resultados es solo un paso intermedio para tu 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 tendrás que convertirlo a JavaScript/ES5 para Internet Explorer y algunos otros navegadores anteriores.
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 archivo HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Ejemplo de devolución de llamada de dos partes
Las devoluciones de llamada Resultados listos y Resultados renderizados se pueden usar en combinación para pasar información de la primera a la segunda. Por ejemplo, la información en el arreglo de objetos de resultado está disponible para la devolución de llamada Resultados listos, pero no para la devolución de llamada Resultados renderizados. Si guardamos esa información en un array como parte de la devolución de llamada Resultados listos, podemos hacer que sea accesible para la devolución de llamada resultados renderizados.
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 la imagen vinculen directamente a los sitios web correspondientes en lugar de mostrar una vista previa de la imagen cuando se hace clic en él.
<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 archivo HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>