Cerca esempi di avvio della richiamata
Il callback avvio ricerca può modificare la query prima che venga utilizzata per la ricerca. Il Motore di ricerca programmabile può essere configurato per includere termini predeterminati nella query, ma questo callback può modificare la query in base alle informazioni disponibili per la funzione di callback.
Il seguente callback di avvio della ricerca decora ogni query con il giorno della settimana corrente.
<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 i seguenti elementi nel codice HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Esempi di callback visualizzati dei risultati
Il callback di risultati visualizzato è utile per modificare la pagina dopo che è stata completata con i risultati. È progettato per facilitare la modifica della visualizzazione dei risultati senza che il callback si assuma la piena responsabilità del rendering dei risultati.
Gli esempi seguenti illustrano due applicazioni del callback dei risultati visualizzati che non funzionano sui risultati.
Questo callback di risultati visualizzati rileva che viene visualizzata 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");
}
};Installa 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 i seguenti elementi nel codice HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Questa demo di callback di risultati visualizzati aumenta le dimensioni dei caratteri dei numeri di "cursor" 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';
};Installa 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 i seguenti elementi nel codice HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Questo callback di visualizzazione dei risultati modifica i link delle pagine in "cursor" 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];
}
};Installa 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 i seguenti elementi nel codice HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Risultati: esempi di callback 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. Funziona 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 i seguenti elementi nel codice HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Nuvola di parole
L'applicazione ovvia del callback risultati pronti è mostrare i risultati di ricerca in un formato difficilmente raggiungibile utilizzando il callback risultati visualizzati per modificare il codice HTML. Il callback Risultati pronti inizia con un div vuoto.
Un esempio nel documento dell'API Search Element ha mostrato come utilizzare il callback per eseguire il rendering di una versione molto semplice dei risultati.
Un altro esempio ha mostrato come conservare i dati dei risultati del callback Risultati pronti e passarli al callback Risultati visualizzati, dove possono essere utilizzati per decorare la visualizzazione standard dei risultati.
Il seguente callback Risultati pronti mostra che i risultati di ricerca non devono essere necessariamente un elenco di risultati. Sostituisce la normale visualizzazione dei risultati di ricerca con una cloud di parole presenti nei titoli e nei contenuti dei risultati. Quando l'elenco dei risultati è solo un passaggio intermedio per l'utente, un callback come questo può ignorare quella fase e utilizzare i risultati per presentare il report che l'utente vuole.
<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. Funziona 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 i seguenti elementi nel codice HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Esempio di callback in due parti
I callback risultati pronti e risultati visualizzati possono essere utilizzati in combinazione per trasmettere le informazioni dal primo al secondo. Ad esempio, le informazioni nell'array di oggetti dei risultati sono disponibili per il callback risultati pronti, ma non per il callback risultati visualizzati. Se salvi queste informazioni in un array come parte del callback risultati pronti, possiamo renderle accessibili al callback risultati visualizzati.
Un esempio di ciò è quello di ignorare il riquadro di anteprima mostrato quando si fa clic su un risultato immagine. Con un callback in due parti, è possibile fare in modo che i risultati delle immagini rimandino direttamente ai siti web corrispondenti, anziché visualizzare un'anteprima dell'immagine quando viene fatto 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,
},
};Includi i seguenti elementi nel codice HTML:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>