Esempi di callback di avvio della ricerca
Il callback search starting può modificare la query prima che venga utilizzata per la ricerca. Il Motore di ricerca programmabile può essere configurato in modo da includere termini predeterminati nella query, ma questa callback può modificare la query in base a qualsiasi informazione disponibile per la funzione di callback.
Il seguente callback search starting decora ogni query con il giorno corrente della settimana.
<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,
},
};Includi questi elementi nell'HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Questo esempio mostra come implementare una funzionalità di Ricerche recenti utilizzando il callback Avvio ricerca.
La funzionalità acquisisce le query degli utenti quando viene attivata una ricerca e le memorizza localmente nel browser. Queste query vengono quindi visualizzate come elementi selezionabili, consentendo agli utenti di ripetere rapidamente le ricerche precedenti, migliorando l'usabilità e riducendo la digitazione ripetuta.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:g9ckaktfipe"></script>
Definisci la funzione helper per memorizzare le ricerche recenti in localStorage, protetta da
un controllo del consenso dell'utente:
// 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);
}
}
Registra il callback search starting. I callback devono essere registrati nell'oggetto
__gcse globale prima di caricare 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
},
},
};
Definisci una funzione per visualizzare le ricerche recenti come elementi selezionabili e inizializzala al caricamento pagina:
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();
});
Includi questi elementi nell'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>
Limitazioni
- I dati vengono archiviati solo nel browser (
localStorage) e richiedono il consenso dell'utente. - Non vengono condivisi tra dispositivi o utenti.
- Vengono cancellati se viene cancellato lo spazio di archiviazione del browser.
- Non tiene traccia delle ricerche effettuate al di fuori di questa pagina.
Esempi di callback di rendering dei risultati
Il callback di rendering dei risultati è utile per modificare la pagina dopo che è stata compilata con i risultati. È progettato per semplificare la modifica della visualizzazione dei risultati senza richiedere che il callback si assuma la piena responsabilità del rendering dei risultati.
Gli esempi seguenti illustrano due applicazioni del callback di rendering dei risultati che non operano sui risultati.
Questo callback results rendered comunica che stiamo visualizzando l'ultima pagina dei risultati e mostra un avviso che ricorda all'utente che ha raggiunto la fine.
<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");
}
};Installare il 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,
},
};Includi questi elementi nell'HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Questa demo di callback results rendered aumenta le dimensioni del carattere dei numeri del "cursore" che selezionano le pagine dei risultati.
La dimensione predefinita del carattere è 12 px. Qui lo aumentiamo 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';
};Installare il 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,
},
};Includi questi elementi nel codice HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Questo callback results rendered modifica i link della pagina nel "cursore" da numeri a lettere.
<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];
}
};Installare il 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,
},
};Includi questi elementi nell'HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Esempi di callback per i risultati pronti
Questo callback formatta i risultati con sfondi chiari e scuri alternati.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>Nota: questo codice è scritto in JavaScript/ES6. Verrà eseguito sulla maggior parte dei browser, ma dovrà essere convertito in JavaScript/ES5 per Internet Explorer e alcuni altri browser meno recenti.
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,
},
};Includi questi elementi nell'HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Nuvola di parole
L'applicazione più ovvia del callback results ready è la visualizzazione dei risultati di ricerca in
un formato difficile da ottenere utilizzando il callback results rendered per modificare
il codice HTML. Il callback results ready inizia con un div vuoto.
Un esempio nel documento API Search Element
mostrava come utilizzare il callback per eseguire il rendering di una versione molto semplice dei risultati.
Un altro esempio
mostrava come conservare i dati dei risultati del callback results ready e passarli al callback
results rendered, dove possono essere utilizzati per decorare la visualizzazione dei risultati standard.
Il seguente callback results ready mostra che i risultati di ricerca non devono essere un elenco di risultati. Sostituisce la normale visualizzazione dei risultati di ricerca con una nuvola di parole trovate nei titoli e nei contenuti dei risultati. Quando l'elenco di risultati è solo un passaggio intermedio per l'utente, un callback come questo può ignorare questa fase e utilizzare i risultati per presentare il report che l'utente desidera.
<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: questo codice è scritto in JavaScript/ES6. Verrà eseguito sulla maggior parte dei browser, ma dovrà essere convertito in JavaScript/ES5 per Internet Explorer e alcuni altri browser meno recenti.
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,
},
};Includi questi elementi nell'HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Esempio di callback in due parti
I callback results ready e results rendered possono essere utilizzati in combinazione per trasferire informazioni dal primo al secondo. Ad esempio, le informazioni nell'array di oggetti risultato sono disponibili per il callback results ready, ma non per il callback results rendered. Se salvi queste informazioni in un array nell'ambito del callback results ready, puoi renderle accessibili al callback results rendered.
Un esempio è l'aggiramento del riquadro di anteprima mostrato quando viene fatto clic su un risultato di immagine. Con un callback in due parti, i risultati delle immagini possono collegarsi direttamente ai siti web corrispondenti anziché mostrare un'anteprima dell'immagine quando viene selezionata.
<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,
},
};Includi questi elementi nell'HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>