Más ejemplos de devoluciones de llamada de elementos de búsqueda

En esta página, se incluyen ejemplos del uso de devoluciones de llamada de elementos de búsqueda. Complementan la ejemplos que se encuentran en la sección Devoluciones de llamadas de la pestaña Personalizado documento de la API de Search Element.

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.

Ejemplo de devolución de llamada de inicio de búsqueda 
<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.

Identifica la última página de 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>
Aumentar el tamaño de fuente del "cursor" vínculos

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>
Utilizar letras para el "Cursor" Etiquetas

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

Mostrar resultados con fondos de colores alternados

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.

Crea una nube de palabras a partir del contenido de los resultados de la búsqueda 
<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.

Omitir vistas previas de imágenes 
<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>