Beispiele für das Starten von Callbacks suchen
Mit dem Callback Suche starten kann die Abfrage geändert werden, bevor sie für die Suche verwendet wird. Die Programmable Search Engine kann so konfiguriert werden, dass vordefinierte Begriffe in der Suchanfrage enthalten sind. kann dieser Callback die Anfrage basierend auf allen Informationen ändern, die ihm zur Verfügung stehen .
Der folgende Callback search beginnt schmückt jede Abfrage mit dem aktuellen Tag. der Woche.
<ph type="x-smartling-placeholder"><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,
},
};Fügen Sie die folgenden Elemente in den HTML-Code ein:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Beispiele für gerenderte Ergebnisse des Callbacks
Der ergebnisgerenderte Callback eignet sich gut, um die Seite zu ändern, nachdem sie mit Ergebnissen gefüllt wurde. Sie ist so konzipiert, dass die Anzeige der Ergebnisse leicht geändert werden kann, ohne dass ein Callback erforderlich ist. die volle Verantwortung für das Rendering der Ergebnisse zu übernehmen.
Die folgenden Beispiele zeigen zwei Anwendungen des Callbacks für den gerenderten Ergebniswert, der nicht auf die Ergebnisse auswirken.
<ph type="x-smartling-placeholder">Dieser gerenderte Ergebnis-Callback weist darauf hin, dass die letzte Seite angezeigt wird. der Ergebnisse. Außerdem wird eine Benachrichtigung angezeigt, die den Nutzer daran erinnert, dass er das Ziel erreicht hat.
<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");
}
};Callback installieren
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,
},
};Fügen Sie die folgenden Elemente in den HTML-Code ein:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>In dieser Callback-Demo für das gerenderte Ergebnis wird die Schriftgröße des "Cursor" die Seiten mit Ergebnissen auswählen.
Die Standardschriftgröße ist 12 Pixel. Hier erhöhen wir es auf 20 Pixel.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>myWebResultsRenderedCallback = function(){
document.getElementsByClassName("gsc-cursor")[0].style.fontSize = '20px';
};Callback installieren
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,
},
};Fügen Sie die folgenden Elemente in den HTML-Code ein:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Durch diesen Callback gerenderte Ergebnisse werden die Seitenlinks im "Cursor" geändert. von Zahlen in Buchstaben.
<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];
}
};Callback installieren
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,
},
};Fügen Sie die folgenden Elemente in den HTML-Code ein:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Beispiele für ergebnisbereite Callbacks
<ph type="x-smartling-placeholder">Dieser Callback formatiert Ergebnisse mit abwechselnden hellen und dunklen Hintergründen.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>Hinweis: Dieser Code ist in JavaScript/ES6 geschrieben. Er funktioniert in den meisten Browsern, in JavaScript/ES5 für Internet Explorer und einige andere ältere Versionen Browser.
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,
},
};Fügen Sie die folgenden Elemente in den HTML-Code ein:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Wortwolke
Die offensichtliche Anwendung des Callbacks results ready besteht darin, Suchergebnisse in
ein Format, das mit dem Callback results gerendert zur Optimierung des
HTML: Der Callback results ready beginnt mit einem leeren div.
Ein Beispiel im Dokument Search Element API
zeigte, wie mithilfe des Callbacks eine sehr einfache Version der Ergebnisse gerendert werden kann.
Anderes Beispiel
gezeigt, wie die Ergebnisdaten aus dem Callback results ready gespeichert und an
Den Callback results gerendert, mit dem er die Standardergebnisse dekorieren kann
Display.
Der folgende results ready-Callback zeigt, dass die Suchergebnisse dies nicht tun müssen. eine Liste von Ergebnissen sein. Es ersetzt die normale Anzeige der Suchergebnisse. mit einer Wortwolke aus den in den Ergebnissen gefundenen Wörtern Titel und Inhalte. Wenn die Liste der ist für den Nutzer nur ein Zwischenschritt. Ein solcher Rückruf kann diese Phase umgehen. und nutzen die Ergebnisse, um den gewünschten Bericht zu präsentieren.
<ph type="x-smartling-placeholder"><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>Hinweis: Dieser Code ist in JavaScript/ES6 geschrieben. Er funktioniert in den meisten Browsern, in JavaScript/ES5 für Internet Explorer und einige andere mit älteren Browsern.
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,
},
};Fügen Sie die folgenden Elemente in den HTML-Code ein:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Beispiel für einen zweiteiligen Callback
Die Callbacks results ready und results gerendert können in Kombination verwendet werden, um Informationen von der ersten an die letztere zu übergeben. Beispielsweise sind die Informationen im Array der Ergebnisobjekte für den Callback results ready verfügbar, nicht aber results gerendert. Indem Sie diese Informationen als Teil des results ready-Callbacks in einem Array speichern, können wir sie dem results gerendert-Callback zugänglich machen.
Ein Beispiel hierfür ist, den Vorschaubereich zu umgehen, der angezeigt wird, wenn auf ein Bildergebnis geklickt wird. Mit einem zweiteiligen Callback können wir die Bildergebnisse direkt mit den entsprechenden Websites verknüpfen, anstatt beim Anklicken eine Bildvorschau anzuzeigen.
<ph type="x-smartling-placeholder"><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,
},
};Fügen Sie die folgenden Elemente in den HTML-Code ein:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>