Mais exemplos de callback de elemento de pesquisa

Esta página contém vários exemplos de uso de callbacks do elemento de pesquisa. Eles complementam encontrados na seção "Callbacks" do guia Documento da API Search Element.

Exemplos de callback inicial da Pesquisa

O callback de início da pesquisa pode modificar a consulta antes de usá-la na pesquisa. O Mecanismo de Pesquisa Programável pode ser configurado para incluir termos predeterminados na consulta, mas esse callback poderá modificar a consulta com base em qualquer informação disponível para o callback. função.

O seguinte callback de início de pesquisa decora cada consulta com o dia atual. da semana.

Exemplo de callback de início da pesquisa 
<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,
    },
};

Inclua estes elementos no HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

Exemplos de callback renderizado de resultados

O callback renderizado dos resultados é bom para modificar a página depois que ela é preenchida com resultados. Ele foi projetado para facilitar a modificação da exibição de resultados sem exigir o retorno de chamada assumir total responsabilidade pela renderização dos resultados.

Os exemplos a seguir ilustram dois aplicativos dos resultados de callback renderizados que não operam nos resultados.

Identificar a última página de resultados

Esse callback resultados renderizados identifica que estamos mostrando a última página. dos resultados e exibe um alerta lembrando ao usuário que ele chegou ao fim. 

<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");
    }
};

Instalar o callback 

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,
  },
};

Inclua estes elementos no HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Aumentar o tamanho da fonte do "cursor" links

Essa demonstração de callback resulta renderizada aumenta o tamanho da fonte do “cursor” números que selecionam páginas de resultados.

O tamanho da fonte padrão é de 12 px. Aqui, nós aumentamos para 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';
};

Instalar o callback 

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,
  },
};

Inclua estes elementos no HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Usar letras para "Cursor" Marcadores

Esse callback resultado renderizado muda os links da página no "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];
    }
};

Instalar o callback 

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,
  },
};

Inclua estes elementos no HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

Exemplos de callback de resultados prontos

Exibir resultados com fundos de cores alternadas

Esse callback formata os resultados com planos de fundo claros e escuros alternados. 

<script async
      src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>

Observação: este código é escrito em JavaScript/ES6. Ele pode ser executado na maioria dos navegadores, mas para JavaScript/ES5 para o Internet Explorer e alguns outros navegadores da Web. 

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,
  },
};

Inclua estes elementos no HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

Nuvem de palavras

A aplicação óbvia do callback results prontos é mostrar os resultados da pesquisa em um formato que seria difícil de alcançar usando o retorno de chamada results render para ajustar o HTML. O callback results Ready começa com um div vazio. Um exemplo no documento API Search Element mostrou como usar o callback para renderizar uma versão muito simples dos resultados. Outro exemplo mostrou como armazenar os dados de resultados do callback results Ready e passá-los para o callback results renderizadas em que ele pode ser usado para decorar os resultados padrão. exibição.

O callback results Ready a seguir mostra que os resultados da pesquisa não precisam ser uma lista de resultados. Ela substitui a exibição normal dos resultados de pesquisa com uma nuvem das palavras encontradas nos resultados títulos e conteúdo. Quando a lista de resultados for apenas uma etapa intermediária para o usuário, um retorno de chamada como esse pode ignorar esse estágio e use os resultados para apresentar o relatório que o usuário quer.

Criar uma nuvem de palavras com base no conteúdo dos resultados da pesquisa 
<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>

Observação: este código é escrito em JavaScript/ES6. Ele pode ser executado na maioria dos navegadores, mas para JavaScript/ES5 para o Internet Explorer e alguns outros navegadores mais antigos. 

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,
    },
};

Inclua estes elementos no HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

Exemplo de callback em duas partes

Os callbacks resultados prontos e resultados renderizados podem ser usados em combinação para transmitir informações do primeiro para o segundo. Por exemplo, as informações na matriz de objetos de resultado estão disponíveis para o callback results Ready, mas não para o retorno de chamada resultados renderizados. Ao salvar essa informação em uma matriz como parte do callback results Ready, podemos torná-la acessível ao callback results render

Um exemplo disso é ignorar o painel de visualização mostrado quando um resultado de imagem é clicado. Com um callback de duas partes, é possível fazer com que os resultados de imagens sejam vinculados diretamente aos sites correspondentes, em vez de exibir uma visualização da imagem quando clicados.

Ignorar visualizações de imagens 
<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,
  },
};

Inclua estes elementos no HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>