Beispiele für Rückrufe zum Starten der Suche
Mit dem Callback search starting kann die Anfrage geändert werden, bevor sie für die Suche verwendet wird. Die Programmierbare Suchmaschine kann so konfiguriert werden, dass bestimmte Begriffe in die Anfrage aufgenommen werden. Mit diesem Callback kann die Anfrage jedoch auf Grundlage beliebiger Informationen, die der Callback-Funktion zur Verfügung stehen, geändert werden.
Der folgende search starting-Callback versieht jede Anfrage mit dem aktuellen Wochentag.
<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 der HTML-Datei folgende Elemente hinzu:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>In diesem Beispiel wird gezeigt, wie Sie die Funktion Letzte Suchanfragen mit dem Callback search starting implementieren.
Die Funktion erfasst Nutzeranfragen, wenn eine Suche ausgelöst wird, und speichert sie lokal im Browser. Diese Anfragen werden dann als anklickbare Elemente angezeigt, sodass Nutzer frühere Suchanfragen schnell wiederholen können. Das verbessert die Nutzerfreundlichkeit und reduziert wiederholte Eingaben.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:g9ckaktfipe"></script>
Definieren Sie die Hilfsfunktion zum Speichern der letzten Suchanfragen in localStorage, geschützt durch eine Prüfung der Nutzereinwilligung:
// 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);
}
}
Registrieren Sie den Callback search starting. Rückrufe müssen im globalen __gcse-Objekt registriert werden, bevor cse.js geladen wird:
// Install the callback.
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
web: {
starting: function (gname, query) {
saveRecentSearch(query);
renderRecentSearches();
return query; // continue normal search
},
},
};
Definieren Sie eine Funktion, um letzte Suchanfragen als klickbare Elemente zu rendern, und initialisieren Sie sie beim Seitenaufbau:
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();
});
Fügen Sie der HTML-Datei folgende Elemente hinzu:
<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>
Beschränkungen
- Die Daten werden nur im Browser (
localStorage) gespeichert und erfordern die Nutzereinwilligung. - Sie werden nicht geräte- oder nutzerübergreifend geteilt.
- Wird gelöscht, wenn der Browserspeicher geleert wird.
- Es werden keine Suchanfragen erfasst, die außerhalb dieser Seite gestellt werden.
Beispiele für den Callback „Results Rendered“
Der Callback für gerenderte Ergebnisse eignet sich gut, um die Seite zu ändern, nachdem sie mit Ergebnissen gefüllt wurde. Sie soll es erleichtern, die Darstellung der Ergebnisse zu ändern, ohne dass der Callback für das Rendern der Ergebnisse verantwortlich ist.
Die folgenden Beispiele veranschaulichen zwei Anwendungen des „results rendered“-Callbacks, die nicht auf die Ergebnisse angewendet werden.
Der Callback results rendered erkennt, dass wir die letzte Seite mit Ergebnissen anzeigen, und zeigt eine Benachrichtigung an, die den Nutzer daran erinnert, dass er das Ende 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 der HTML-Datei folgende Elemente hinzu:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>In dieser Callback-Demo für results rendered wird die Schriftgröße der „Cursor“-Zahlen erhöht, mit denen Ergebnisseiten ausgewählt werden.
Die Standardschriftgröße beträgt 12 Pixel. Hier erhöhen wir sie auf 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';
};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 der HTML-Datei folgende Elemente hinzu:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Mit diesem results rendered-Callback werden die Seitenlinks im „Cursor“ von Zahlen in Buchstaben geändert.
<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 der HTML-Datei folgende Elemente hinzu:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Beispiele für den Rückruf „Results Ready“
In diesem Callback werden Ergebnisse mit abwechselnd hellen und dunklen Hintergründen formatiert.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>Hinweis: Dieser Code ist in JavaScript/ES6 geschrieben. Es kann in den meisten Browsern ausgeführt werden, muss aber für Internet Explorer und einige andere ältere Browser in JavaScript/ES5 konvertiert werden.
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 der HTML-Datei folgende Elemente hinzu:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Wortwolke
Die offensichtliche Anwendung des results ready-Callbacks besteht darin, Suchergebnisse in einem Format anzuzeigen, das mit dem results rendered-Callback nur schwer zu erreichen wäre, um das HTML anzupassen. Der results ready-Callback beginnt mit einem leeren div.
Ein Beispiel im Dokument zur Search Element API zeigte, wie mit dem Callback eine sehr einfache Version der Ergebnisse gerendert wird.
In einem anderen Beispiel wurde gezeigt, wie die Ergebnisdaten aus dem results ready-Callback gespeichert und an den results rendered-Callback übergeben werden können, wo sie verwendet werden können, um die Standardergebnisanzeige zu gestalten.
Der folgende results ready-Callback zeigt, dass Suchergebnisse nicht unbedingt eine Liste von Ergebnissen sein müssen. Sie ersetzt die normale Darstellung der Suchergebnisse durch eine Wortwolke mit den Wörtern, die in den Titeln und Inhalten der Ergebnisse gefunden wurden. Wenn die Liste der Ergebnisse nur ein Zwischenschritt für den Nutzer ist, kann mit einem solchen Callback diese Phase umgangen und die Ergebnisse verwendet werden, um den gewünschten Bericht zu präsentieren.
<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. Sie wird in den meisten Browsern ausgeführt, muss aber für Internet Explorer und einige andere ältere Browser in JavaScript/ES5 konvertiert werden.
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 der HTML-Datei folgende Elemente hinzu:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>Beispiel für einen zweiteiligen Callback
Die Callbacks results ready und results rendered können in Kombination verwendet werden, um Informationen vom ersten an den zweiten zu übergeben. Die Informationen im Array der Ergebnisobjekte sind beispielsweise für den Callback results ready, aber nicht für den Callback results rendered verfügbar. Wenn wir diese Informationen als Teil des results ready-Callbacks in einem Array speichern, können wir sie für den results rendered-Callback verfügbar machen.
Ein Beispiel hierfür ist das Umgehen des Vorschaufensters, das angezeigt wird, wenn auf ein Bildergebnis geklickt wird. Mit einem zweiteiligen Callback können wir die Bildersucherergebnisse direkt mit den entsprechenden Websites verknüpfen, anstatt bei einem Klick eine Bildvorschau anzuzeigen.
<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 der HTML-Datei folgende Elemente hinzu:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>