Ejemplos de devolución de llamada de inicio de búsqueda
La devolución de llamada inicio de la búsqueda puede modificar la consulta antes de que se la use. El Motor de Búsqueda Programable puede configurarse para incluir 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 devolución de llamada .
La siguiente devolución de llamada de inicio de la búsqueda decora cada consulta con el día actual. de la semana.
<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>Ejemplos de devolución de llamada de resultados renderizados
La devolución de llamada de resultados renderizados sirve para modificar la página después de que se propagan los resultados. Está diseñada para facilitar la modificación de la visualización de resultados sin requerir la devolución de llamada. asumir toda la responsabilidad de mostrar los resultados.
Los siguientes ejemplos ilustran dos aplicaciones de la devolución de llamada de resultados que muestra no operen en los resultados.
Esta devolución de llamada results renderizado nota que estamos mostrando la última página. de resultados y aparece una alerta emergente 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 código HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Esta devolución de llamada de resultados renderizados aumenta el tamaño de fuente de "cursor" números que seleccionan páginas de resultados.
El tamaño de fuente predeterminado es 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';
};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 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 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 código 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 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 a JavaScript/ES5 para Internet Explorer y otras versiones anteriores navegadores.
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 acceder con la devolución de llamada results renderizados para modificar la
HTML La devolución de llamada results ready comienza con un div vacío.
Un ejemplo en el 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.
Otro ejemplo
se 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 renderizado, en la que se puede usar para decorar los resultados estándar.
pantalla.
La siguiente devolución de llamada results ready muestra que no es necesario que los resultados de la búsqueda se muestren ser una lista de resultados. Reemplaza la visualización normal de los resultados de la búsqueda. con una nube de palabras de las palabras que se encuentran en los resultados en los títulos y el contenido. 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 utilizar 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 se convertirá a JavaScript/ES5 para Internet Explorer y algunas otras 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 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 resultados listos y resultados renderizados se pueden usar en combinación para pasar información de los primeros a los últimos. Por ejemplo, la información en el array de objetos de resultado está disponible para la devolución de llamada results ready, pero no para la devolución de llamada results process. Si guardamos esa información en un array como parte de la devolución de llamada results ready, podemos hacer que sea accesible para la devolución de llamada results renderizado.
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 se vinculen directamente a los sitios web correspondientes en lugar de mostrar la vista previa de una imagen al hacer clic.
<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>