Exemplos de callback de início da pesquisa
O callback search starting pode modificar a consulta antes de ela ser usada na pesquisa. O mecanismo de pesquisa programável pode ser configurado para incluir termos predeterminados na consulta, mas esse callback pode modificar a consulta com base em qualquer informação disponível para a função de callback.
O callback search starting a seguir decora cada consulta com o dia da semana atual.
<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>Este exemplo demonstra como implementar um recurso de Pesquisas recentes usando o callback de início da pesquisa.
O recurso captura as consultas do usuário quando uma pesquisa é acionada e as armazena localmente no navegador. Essas consultas são exibidas como itens clicáveis, permitindo que os usuários repitam rapidamente pesquisas anteriores, melhorando a usabilidade e reduzindo a digitação repetida.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:g9ckaktfipe"></script>
Defina a função auxiliar para armazenar pesquisas recentes em localStorage, protegida por uma verificação de consentimento do usuário:
// 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);
}
}
Registre o callback de início da pesquisa. Os callbacks precisam ser registrados no objeto global
__gcse antes de carregar 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
},
},
};
Defina uma função para renderizar as pesquisas recentes como itens clicáveis e inicialize-a no carregamento de 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();
});
Inclua estes elementos no 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>
Limitações
- Os dados são armazenados apenas no navegador (
localStorage) e exigem o consentimento do usuário. - Não são compartilhados entre dispositivos ou usuários.
- Limpo se o armazenamento do navegador for limpo.
- Não rastreia pesquisas feitas fora desta página.
Exemplos de callback de renderização de resultados
O callback de renderização de 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 que o callback assuma total responsabilidade pela renderização dos resultados.
Os exemplos a seguir ilustram duas aplicações do callback de renderização de resultados que não operam nos resultados.
Esse callback results rendered avisa que estamos mostrando a última página de resultados e exibe um alerta lembrando o usuário de 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>Esta demonstração de callback de resultados renderizados aumenta o tamanho da fonte dos números do "cursor" que selecionam páginas de resultados.
O tamanho de fonte padrão é 12 px. Aqui, 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>Esse callback de resultados renderizados muda os links da página no "cursor" de números para 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
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 foi escrito em JavaScript/ES6. Ele será executado na maioria dos navegadores, mas precisará ser convertido para JavaScript/ES5 no Internet Explorer e em alguns outros navegadores mais antigos.
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 ready é mostrar resultados da pesquisa em
um formato difícil de alcançar usando o callback results rendered para ajustar o
HTML. O callback results ready começa com um div vazio.
Um exemplo no documento da API Search Element
mostrou como usar o callback para renderizar uma versão muito simples dos resultados.
Outro exemplo
mostrou como manter os dados de resultados do callback results ready e transmiti-los para
o callback results rendered, em que podem ser usados para decorar a exibição
padrão de resultados.
O callback results ready a seguir mostra que os resultados da pesquisa não precisam ser uma lista. Ela substitui a exibição normal dos resultados da pesquisa por uma nuvem de palavras encontradas nos títulos e no conteúdo dos resultados. Quando a lista de resultados é apenas uma etapa intermediária para o usuário, um callback como esse pode ignorar essa fase e usar os resultados para apresentar o relatório que o usuário quer.
<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 foi escrito em JavaScript/ES6. Ele vai funcionar na maioria dos navegadores, mas precisará ser convertido para JavaScript/ES5 no Internet Explorer e em 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 de duas partes
Os callbacks results ready e results rendered 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 resultados prontos, mas não para o callback resultados renderizados. Ao salvar essas informações em uma matriz como parte do callback results ready, podemos torná-las acessíveis ao callback results rendered.
Um exemplo disso é ignorar o painel de visualização mostrado quando um resultado de imagem é clicado. Com um callback de duas partes, podemos fazer com que os resultados de imagens sejam vinculados diretamente aos sites correspondentes em vez de mostrar uma prévia da imagem quando clicada.
<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>