Sie können Programmable Search Engine-Komponenten wie Suchfelder und Suchergebnisseiten mit HTML-Markup Ihre Webseiten und andere Webanwendungen nutzen. Diese Programmable Search Engine -Elemente bestehen aus Komponenten, die basierend auf den von den den Server für die Programmable Search und alle von Ihnen vorgenommenen Anpassungen.
Der gesamte JavaScript-Code wird asynchron geladen, sodass Ihre Webseite während der Browser den JavaScript-Code der Programmable Search Engine abruft.
Einführung
Dieses Dokument enthält ein Basismodell zum Hinzufügen der Programmable Search Engine. -Elementen auf Ihrer Webseite zusammen mit Erklärungen zu den konfigurierbaren Komponenten und einer flexiblen JavaScript API.
Umfang
In diesem Dokument wird die Verwendung der Funktionen und Eigenschaften, die für die Programmable Search Engine Control API.
Browserkompatibilität
Eine Liste der von der Programmable Search Engine unterstützten Browser finden Sie hier.
Zielgruppe
Diese Dokumentation richtet sich an Entwickler, die Google Programmable Suchfunktionen hinzufügen.
Programmierbare Suchelemente
Sie können HTML-Markup verwenden, um Ihrer Seite ein Programmable Search Element hinzuzufügen. Jedes -Element besteht aus mindestens einer Komponente: einem Suchfeld, einem Suchblock Ergebnisse, oder beides. In das Suchfeld können Nutzer Folgendes eingeben: Möglichkeiten:
- Eine in das Texteingabefeld eingegebene Suchanfrage
- Ein in eine URL eingebetteter Abfragestring
- Programmatische Ausführung
Außerdem akzeptiert der Block der Suchergebnisse Eingaben in den auf folgende Arten:
- Ein in eine URL eingebetteter Abfragestring
- Programmatische Ausführung
Die folgenden Typen von programmierbaren Suchelementen sind verfügbar:
Elementtyp | Komponenten | Beschreibung |
---|---|---|
standard | <div class="gcse-search"> |
Ein Suchfeld und Suchergebnisse
werden im selben <div> angezeigt. |
zweispaltig | <div class="gcse-searchbox"> und <div class="gcse-searchresults"> |
Ein zweispaltiges Layout mit Suchergebnissen auf einer Seite und einem Suchfeld
auf der anderen Seite. Wenn Sie im zweispaltigen Modus mehrere Elemente einfügen möchten
auf Ihrer Webseite können Sie mit dem Attribut gname eine
mit einem Block von Suchergebnissen. |
Nur Suchfeld | <div class="gcse-searchbox-only"> |
Ein eigenständiges Suchfeld. |
searchresults-only | <div class="gcse-searchresults-only"> |
Ein eigenständiger Block mit Suchergebnissen. |
Sie können Ihrer Webseite beliebig viele gültige Suchelemente hinzufügen. Für zweispaltige und alle erforderlichen Komponenten (ein Suchfeld und Ergebnisblock) vorhanden sein müssen.
Hier ist ein Beispiel für ein einfaches Suchelement:
<!-- Put the following javascript before the closing </head> tag and replace 123456 with your own Programmable Search Engine ID. --> <script async src="https://cse.google.com/cse.js?cx=123456"></script> <!-- Place this tag where you want both of the search box and the search results to render --> <div class="gcse-search"></div>
Verschiedene Layoutoptionen mit Programmable Search Elements erstellen
Die folgenden Layoutoptionen sind auf der Seite „Design“ des Steuerfelds „Programmable Search Engine“ verfügbar. Im Folgenden finden Sie einige allgemeine Richtlinien zum Erstellen von Layoutoptionen mit programmierbaren Suchelementen. Um eine Demo dieser Optionen anzuzeigen, klicken Sie auf den Link.
Option | Komponenten |
---|---|
Volle Breite | <div class="gcse-search"> |
Kompakt | <div class="gcse-search"> |
Zweispaltig | <div class="gcse-searchbox"> , <div class="gcse-searchresults"> |
Zweiseitig <ph type="x-smartling-placeholder"> | <div class="gcse-searchbox-only"> auf der ersten Seite, <div class="gcse-searchresults-only"> (oder anderen Komponenten) auf der zweiten Seite. |
Nur Ergebnisse <ph type="x-smartling-placeholder"> | <div class="gcse-searchresults-only"> |
Bei Google gehostet <ph type="x-smartling-placeholder"> | <div class="gcse-searchbox-only"> |
Weitere Informationen zu Layoutoptionen
Elemente der programmierbaren Suche anpassen
Um Farben, Schriftart und Linkstil anzupassen, rufen Sie die Seite „Design“ Ihrer programmierbaren Suchmaschine auf.
Sie können optionale Attribute verwenden, um Konfigurationen zu überschreiben, die in der
Programmierbare Suchmaschine
Steuerfeld So können Sie eine seitenspezifische Suche erstellen.
Mit dem folgenden Code wird beispielsweise ein Suchfeld erstellt, das eine Suchergebnisseite öffnet.
(http://www.example.com?search=lady+gaga) in einem neuen Fenster öffnen. Der Wert der Eigenschaft
queryParameterName
zusammen mit dem Nutzerabfragestring
mit denen die Ergebnis-URL erstellt wurde.
Beachten Sie, dass dem Attribut queryParameterName
das Präfix data-
vorangestellt ist.
Dieses Präfix ist für alle Attribute erforderlich.
<div class="gcse-searchbox-only" data-resultsUrl="http://www.example.com" data-newWindow="true" data-queryParameterName="search">
Wenn Sie über das Steuerfeld der Programmable Search Engine Funktionen wie automatische Vervollständigung oder Optimierungen nutzen, können Sie um diese Funktionen anzupassen. Alle Anpassungen, die Sie mithilfe dieser Attribute festlegen überschreibt die im Steuerungsfeld vorgenommenen Einstellungen. Im folgenden Beispiel wird erstellt, ein zweispaltiges Suchelement mit den folgenden Funktionen:
- Verlaufsverwaltung ist aktiviert
- Die maximale Anzahl der angezeigten automatischen Vervollständigungen ist auf 5 festgelegt
- Suchfilter werden als Links angezeigt.
<div class="gcse-searchbox" data-enableHistory="true" data-autoCompleteMaxCompletions="5"> <div class="gcse-searchresults" data-refinementStyle="link">
Unterstützte Attribute
Attribut | Typ | Beschreibung | Komponente |
---|---|---|---|
Allgemein | |||
gname |
String | Optional: Geben Sie einen Namen für das Suchelementobjekt ein. Ein Name wird verwendet, um
eine verknüpfte Komponente nach Namen, oder um eine searchbox zu koppeln
Komponente mit einer searchresults -Komponente. Wenn nicht angegeben,
Die Programmable Search Engine generiert automatisch ein gname auf Grundlage von
die Reihenfolge der
Komponenten auf der Webseite. Zum Beispiel könnte der erste unbenannte
searchbox-only enthält das gname -Objekt „nur Suchfeld0“.
und die zweite das gname -Zeichen „Nur-Seachbox1“ usw.
Die automatisch generierte gname für eine Komponente in
zweispaltiges Layout wird two-column . Im folgenden Beispiel
verwendet den gname-storesearch , um eine searchbox zu verknüpfen
mit einer searchresults -Komponente:
<div class="gcse-searchbox" data-gname="storesearch"></div> <div class="gcse-searchresults" data-gname="storesearch"></div> Wenn beim Abrufen eines Objekts mehr als eine Komponente
|
Beliebig |
autoSearchOnLoad |
Boolesch | Gibt an, ob eine Suche anhand der in die URL eingebetteten Abfrage ausgeführt werden soll
der geladenen Seite ein. Die URL muss einen Abfragestring enthalten.
um die automatische Suche auszuführen. Standardeinstellung: true . |
Beliebig |
enableHistory |
Boolesch | Bei true wird die Verlaufsverwaltung für den Browser aktiviert. Zurück
und Vorwärts. Demo ansehen |
Suchfeld Nur Suchfeld |
queryParameterName |
String | Der Name des Abfrageparameters, z. B. q (Standardeinstellung)
oder query . Diese wird in die URL eingebettet (z. B.
http://www.example.com?q=lady+gaga). Beachten Sie, dass die Angabe des
Der Name des Suchparameters allein löst beim Laden keine automatische Suche aus. Eine Abfrage
String muss in der URL vorhanden sein, damit die automatische Suche ausgeführt werden kann. |
Beliebig |
resultsUrl |
URL | Die URL der Ergebnisseite. Die Standardeinstellung ist die von Google gehostete Seite. | Nur Suchfeld |
newWindow |
Boolesch | Gibt an, ob die Ergebnisseite in einem neuen Fenster geöffnet wird.
Standardeinstellung: false . |
Nur Suchfeld |
ivt |
Boolesch |
Mit diesem Parameter können Sie einen booleschen Wert angeben, der Google darüber informiert, Anzeigen, die ein Cookie für ungültige Zugriffe und lokale Speicherung sowohl auf mit Einwilligung Zugriffe ohne Einwilligung.
Standardwert: Verwendungsbeispiel: |
Suchergebnisse searchresults-only |
mobileLayout |
String |
Gibt an, ob die mobilen Layout-Stile für Mobilgeräte verwendet werden sollen.
Standardwert: Verwendungsbeispiel: |
Beliebig |
Automatische Vervollständigung | |||
enableAutoComplete |
Boolesch | Nur verfügbar, wenn im Steuerfeld der Programmable Search Engine die automatische Vervollständigung aktiviert wurde.
true aktiviert die automatische Vervollständigung. |
Beliebig |
autoCompleteMaxCompletions |
Ganzzahl | Die maximale Anzahl von automatischen Vervollständigungen, die angezeigt werden sollen. | Suchfeld Nur Suchfeld |
autoCompleteMaxPromotions |
Ganzzahl | Die maximale Anzahl von bevorzugten Suchergebnissen, die in der automatischen Vervollständigung angezeigt werden sollen. | Suchfeld Nur Suchfeld |
autoCompleteValidLanguages |
String | Durch Kommas getrennte Liste von Sprachen, für die die automatische Vervollständigung verwendet werden soll aktiviert. <ph type="x-smartling-placeholder"></ph> Unterstützte Sprachen. | Suchfeld Nur Suchfeld |
Verfeinerungen | |||
defaultToRefinement |
String | Nur verfügbar, wenn in der Steuerfeld der Programmable Search Engine Gibt das standardmäßige Suchfilter-Label für display.Hinweis: Dieses Attribut wird für von Google gehostetes Layout nicht unterstützt. | Beliebig |
refinementStyle |
String | Zulässige Werte sind tab (Standardeinstellung) und link .
link wird nur unterstützt, wenn die Bildersuche deaktiviert ist oder wenn
Die Bildersuche ist aktiviert, aber die Websuche ist deaktiviert. |
Suchergebnisse searchresults-only |
Bildersuche | |||
enableImageSearch |
Boolesch | Nur verfügbar, wenn
Bildersuche im Steuerfeld der Programmable Search Engine aktiviert.
Bei |
Suchergebnisse searchresults-only |
defaultToImageSearch |
Boolesch | Nur verfügbar, wenn
Bildersuche im Steuerfeld der Programmable Search Engine aktiviert.
Wenn |
Beliebig |
imageSearchLayout |
String | Nur verfügbar, wenn
Bildersuche im Steuerfeld der Programmable Search Engine aktiviert.
Legt das Layout der Ergebnisseite der Bildersuche fest. Zulässige Werte
|
Suchergebnisse searchresults-only |
imageSearchResultSetSize |
Ganzzahl, String | Nur verfügbar, wenn
Bildersuche im Steuerfeld der Programmable Search Engine aktiviert.
Gibt die maximale Größe der Suchergebnisse für die Bildersuche an.
Beispiele: |
Beliebig |
image_as_filetype |
String | Nur verfügbar, wenn
Bildersuche im Steuerfeld der Programmable Search Engine aktiviert.
Beschränkt die Ergebnisse auf Dateien mit einer bestimmten Erweiterung. Unterstützte Erweiterungen sind | Beliebig |
image_as_oq |
String | Nur verfügbar, wenn
Bildersuche im Steuerfeld der Programmable Search Engine aktiviert.
Suchergebnisse mit einer logischen ODER-Verknüpfung filtern. Beispielverwendung, wenn Sie Suchergebnisse erhalten möchten, die entweder „term1“ enthalten oder "term2": | Beliebig |
image_as_rights |
String | Nur verfügbar, wenn
Bildersuche im Steuerfeld der Programmable Search Engine aktiviert.
Lizenzbasierte Filter. Unterstützte Werte sind Siehe Typische Kombinationen. | Beliebig |
image_as_sitesearch |
String | Nur verfügbar, wenn
Bildersuche im Steuerfeld der Programmable Search Engine aktiviert.
Ergebnisse auf Seiten einer bestimmten Website beschränken Verwendungsbeispiel: | Beliebig |
image_colortype |
String | Nur verfügbar, wenn
Bildersuche im Steuerfeld der Programmable Search Engine aktiviert.
Beschränkt die Suche auf Schwarz-Weiß- (Mono-), Graustufen- oder Farbbilder. Unterstützte Werte: | Beliebig |
image_cr |
String | Nur verfügbar, wenn
Bildersuche im Steuerfeld der Programmable Search Engine aktiviert.
Beschränkt die Suchergebnisse auf Dokumente aus einem bestimmten Land. | Beliebig |
image_dominantcolor |
String | Nur verfügbar, wenn
Bildersuche im Steuerfeld der Programmable Search Engine aktiviert.
Beschränkt die Suche auf Bilder einer bestimmten dominanten Farbe.
Unterstützte Werte sind | Beliebig |
image_filter |
String | Nur verfügbar, wenn
Bildersuche im Steuerfeld der Programmable Search Engine aktiviert.
Automatisches Filtern von Suchergebnissen Unterstützte Werte: 0/1 Verwendungsbeispiel: | Beliebig |
image_gl |
String | Nur verfügbar, wenn Bildersuche im Steuerfeld der Programmable Search Engine aktiviert. Verbesserte Suchergebnisse, deren Ursprungsland mit dem Parameterwert übereinstimmt. | Beliebig |
image_size |
String | Nur verfügbar, wenn
Bildersuche im Steuerfeld der Programmable Search Engine aktiviert.
Gibt Bilder einer bestimmten Größe zurück. Folgende Größen sind möglich: | Beliebig |
image_sort_by |
String | Nur verfügbar, wenn
Bildersuche im Steuerfeld der Programmable Search Engine aktiviert.
Sie können die Ergebnisse nach Datum oder anderen strukturierten Inhalten sortieren. Verwenden Sie zum Sortieren nach Relevanz einen leeren String (image_sort_by=""). Verwendungsbeispiel: | Beliebig |
image_type |
String | Nur verfügbar, wenn
Bildersuche im Steuerfeld der Programmable Search Engine aktiviert.
Beschränkt die Suche auf Bilder eines bestimmten Typs.
Unterstützte Werte sind | Beliebig |
Websuche | |||
disableWebSearch |
Boolesch | Wenn true , wird die Websuche deaktiviert. Wird normalerweise nur verwendet, wenn
<ph type="x-smartling-placeholder"></ph>
Bildersuche im Steuerfeld der Programmable Search Engine aktiviert. |
Suchergebnisse searchresults-only |
webSearchQueryAddition |
String | Zusätzliche Begriffe, die der Suchanfrage mit logischem ODER hinzugefügt wurden.
Verwendungsbeispiel: |
Beliebig |
webSearchResultSetSize |
Ganzzahl, String | Die maximale Größe der Ergebnismenge. Gilt für
die Bildersuche als auch die Websuche. Die Standardeinstellung hängt vom Layout und
ob die Programmable Search Engine für die Suche im gesamten Web oder nur für bestimmte
Websites. Zulässige Werte:
<ph type="x-smartling-placeholder">
|
Beliebig |
webSearchSafesearch |
String |
Gibt an, ob
SafeSearch ist
Ergebnisse der Websuche aktiviert. Zulässige Werte sind off und active .
|
Beliebig |
as_filetype |
String | Beschränkt die Ergebnisse auf Dateien mit einer bestimmten Erweiterung. Eine Liste der Dateitypen, die von Google indexiert werden können, finden Sie in der Search Console-Hilfe. | Beliebig |
as_oq |
String | Suchergebnisse mit einer logischen ODER-Verknüpfung filtern.
Beispielverwendung, wenn Sie Suchergebnisse erhalten möchten, die entweder „term1“ enthalten oder "term2": |
Beliebig |
as_rights |
String | Lizenzbasierte Filter.
Unterstützte Werte sind Unter https://wiki.creativecommons.org/wiki/CC_Search_integration finden Sie typische Kombinationen. | Beliebig |
as_sitesearch |
String | Ergebnisse auf Seiten einer bestimmten Website beschränken
Verwendungsbeispiel: |
Beliebig |
cr |
String | Beschränkt die Suchergebnisse auf Dokumente aus einem bestimmten Land.
Verwendungsbeispiel: |
Beliebig |
filter |
String | Automatisches Filtern von Suchergebnissen
Unterstützte Werte: 0/1 Verwendungsbeispiel: |
Beliebig |
gl |
String | Verbesserte Suchergebnisse, deren Ursprungsland mit dem Parameterwert übereinstimmt.
Dies funktioniert nur in Verbindung mit der Einstellung für den Sprachwert. Verwendungsbeispiel: |
Beliebig |
lr |
String | Beschränkt die Suchergebnisse auf Dokumente in einer bestimmten Sprache.
Verwendungsbeispiel: |
Beliebig |
sort_by |
String | Sie können die Ergebnisse nach Datum oder anderen strukturierten Inhalten sortieren. Der Attributwert muss eine der Optionen sein, die in den Einstellungen für die Sortierung der Ergebnisse der programmierbaren Suche angegeben werden (z. B. 9.)
Verwenden Sie zum Sortieren nach Relevanz einen leeren String (sort_by=""). Verwendungsbeispiel: |
Beliebig |
Suchergebnisse | |||
enableOrderBy |
Boolesch | Aktiviert die Sortierung der Ergebnisse nach Relevanz, Datum oder Label. | Beliebig |
linkTarget |
String | Legt das Linkziel fest. Standardeinstellung: _blank . |
Suchergebnisse searchresults-only |
noResultsString |
String | Gibt den Standardtext an, der angezeigt wird, wenn keine Ergebnisse mit der Abfrage übereinstimmen. Mit dem Standardergebnisstring kann eine lokalisierte Zeichenfolge in allen unterstützten Sprachen, während dies bei der benutzerdefinierten Sprache nicht der Fall ist. | Suchergebnisse searchresults-only |
resultSetSize |
Ganzzahl, String | Die maximale Größe der Ergebnismenge. Beispiel: large ,
small , filtered_cse , 10 . Die
hängt vom Layout und davon ab, ob die Suchmaschine für die Suche
das gesamte Web oder nur bestimmte Websites aus. |
Beliebig |
safeSearch |
String | Gibt an, ob
SafeSearch ist sowohl für die Web- als auch die Bildersuche aktiviert. Zulässige Werte: off
und active . |
Beliebig |
Callbacks
<ph type="x-smartling-placeholder">Callbacks unterstützen die detaillierte Steuerung der Initialisierung der Suchelemente und der Suchprozesse.
Sie werden im JavaScript des Search Element über das globale __gcse
registriert.
-Objekt enthält. Register Callbacks (Callbacks registrieren) veranschaulicht die Registrierung aller
unterstützte Callbacks unterstützt.
window.__gcse = {
parsetags: 'explicit', // Defaults to 'onload'
initializationCallback: myInitializationCallback,
searchCallbacks: {
image: {
starting: myImageSearchStartingCallback,
ready: myImageResultsReadyCallback,
rendered: myImageResultsRenderedCallback,
},
web: {
starting: myWebSearchStartingCallback,
ready: myWebResultsReadyCallback,
rendered: myWebResultsRenderedCallback,
},
},
};
Initialisierungs-Callback
Der Initialisierungs-Callback wird aufgerufen, bevor das Suchelement-JavaScript die Suche rendert
Elemente im DOM. Wenn parsetags
auf explicit
gesetzt ist,
__gcse
aktiviert, rendert das JavaScript für das Suchelement die Suchelemente auf dem
Initialisierungs-Callback (wie unter Register Callbacks dargestellt).
Dies kann verwendet werden, um Elemente zum Rendern auszuwählen oder das Rendern von Elementen zu verschieben, bis sie wieder gerendert werden
erforderlich. Außerdem können die Attribute der Elemente überschrieben werden. kann es zum Beispiel
Suchfeld, das über das Steuerfeld oder die HTML-Attribute so konfiguriert ist, dass es standardmäßig
in ein Bildsuchfeld suchen oder angeben, dass über ein Programmable Search Engine-Formular gesendete Anfragen
ausgeführt werden.
<ph type="x-smartling-placeholder"></ph>
Demo ansehen
Die Rolle des Initialisierungs-Callbacks wird durch den Wert des parsetags
gesteuert.
Property von __gcse
.
- Wenn der Wert
onload
ist, gibt das Suchelement JavaScript rendert alle Suchelemente auf der Seite automatisch. Der Initialisierungs-Callback ist weiterhin aufgerufen, ist jedoch nicht für das Rendern der Suchelemente verantwortlich. - Wenn der Wert
explicit
ist, wird das Suchelement-JavaScript nicht gerendert. Elemente suchen. Der Callback kann sie mithilfe der Methoderender()
-Funktion verwenden, oder alle Suchelemente mit der Funktiongo()
rendern
Der folgende Code zeigt, wie ein Suchfeld zusammen mit Suchergebnissen in einem
div
unter Verwendung des Parse-Tags explicit
und des Initialisierungs-Callbacks:
Wir müssen ein <div>
mit einem ID-Wert angeben.
in der der Code für das Suchelement eingefügt werden soll:
<div id="test"></div>
<div>
ein. Beachten Sie, dass es
verweist auf test
, das id
, das wir zur Identifizierung des
<div>
const myInitCallback = function() {
if (document.readyState == 'complete') {
// Document is ready when Search Element is initialized.
// Render an element with both search box and search results in div with id 'test'.
google.search.cse.element.render(
{
div: "test",
tag: 'search'
});
} else {
// Document is not ready yet, when Search Element is initialized.
google.setOnLoadCallback(function() {
// Render an element with both search box and search results in div with id 'test'.
google.search.cse.element.render(
{
div: "test",
tag: 'search'
});
}, true);
}
};
// Insert it before the Search Element code snippet so the global properties like parsetags and callback
// are available when cse.js runs.
window.__gcse = {
parsetags: 'explicit',
initializationCallback: myInitCallback
};
Fügen Sie diesen HTML-Code ein, um mit dem Laden des Suchelements zu beginnen. Ersetzen Sie den Wert cx
in der
src
-Klausel mit Ihrer eigenen cx
.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
Rückrufe suchen
Das Suchelement-JavaScript unterstützt sechs Callbacks, die im die Suche steuern. Die Such-Callbacks kommen paarweise, ein Websuch-Callback und ein übereinstimmender Bildsuche-Callback:
- Suche beginnt
<ph type="x-smartling-placeholder">
- </ph>
- Für die Bildersuche
- Für die Websuche
- Ergebnisse verfügbar
<ph type="x-smartling-placeholder">
- </ph>
- Für die Bildersuche
- Für die Websuche
- Gerenderte Ergebnisse
<ph type="x-smartling-placeholder">
- </ph>
- Für die Bildersuche
- Für die Websuche
Wie beim Initialisierungs-Callback werden auch die Such-Callbacks angezeigt.
mit Einträgen im Objekt __gcse
konfiguriert. Dies geschieht, wenn das Suchelement
JavaScript wird gestartet. Änderungen an „__gcse
“ nach dem Start werden ignoriert.
Jedem dieser Callbacks wird das gName
für
das Search Element als Argument.
gname
ist nützlich, wenn eine Seite mehr als eine Suche enthält. Suche starten
mit dem Attribut data-gname
einen gname
-Wert festlegen:
<div class="gcse-searchbox" data-gname="storesearch"></div>
Wenn der gname im HTML-Code nicht identifiziert wird, generiert das Suchelement-JavaScript einen Wert, der bleiben einheitlich, bis der HTML-Code geändert wird.
Callback beim Starten der Bild-/Websuche
Die Callbacks, die die Suche starten, werden unmittelbar vor den JavaScript-Anfragen für das Suchelement aufgerufen. die Suchergebnisse von seinem Server. Ein Anwendungsbeispiel wäre die Verwendung der lokalen Tageszeit, um Änderungen an der Abfrage zu steuern.
searchStartingCallback(gname, query)
gname
- Identifizierender String des Suchelements
query
- Vom Nutzer eingegebener Wert (möglicherweise durch die Suche geändert) -Elements im JavaScript-Code.)
Der Callback gibt den Wert zurück, der als Abfrage für diese Suche verwendet werden soll. Wird ein Fehler zurückgegeben, leer ist, wird der Rückgabewert ignoriert und der Aufrufer verwendet die unveränderte Abfrage.
Alternativ kannst du die Callback-Funktion in das __gcse
-Objekt einfügen oder
Sie fügen den Callback dynamisch mit JavaScript zum Objekt hinzu:
window.__gcse['searchCallbacks']['web']['starting'] = function(gname, query) {...};
Beispiel für einen Callback beim Starten der Suche
Die Beispielsuche, die einen Callback startet,
Beispiel-Callback beim Starten der Suche fügt entweder morning
hinzu
oder afternoon
hinzu (je nach Tageszeit).
const myWebSearchStartingCallback = (gname, query) => {
const hour = new Date().getHours();
return query + (hour < 12 ? ' morning' : ' afternoon');
};
window.myImageSearchStartingCallbackName = myWebSearchStartingCallback;
Diesen Callback in window.__gcse:
installieren
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
image: {
starting: 'myImageSearchStartingCallbackName',
},
web: {
starting: myWebSearchStartingCallback,
},
};
<script
async src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Rückruf für Bilder-/Websuchergebnisse
Diese Callbacks werden aufgerufen, bevor das Suchelement-JavaScript die bevorzugten Suchergebnisse und Ergebnisse. Ein Beispiel für einen Anwendungsfall wäre ein Callback, der bevorzugte Suchergebnisse darstellt und zu einem Stil führt, kann nicht mit der normalen Anpassung angegeben werden.
resultsReadyCallback(gname, query, promos, results, div)
gname
- Identifizierender String des Suchelements
query
- Abfrage, die diese Ergebnisse geliefert hat
promos
- Ein Array mit Werbeobjekten, die übereinstimmenden Werbeaktionen für die auf die Suchanfrage des Nutzers. Weitere Informationen finden Sie in der Definition des Angebotsobjekts.
results
- Array von Ergebnisobjekten Weitere Informationen finden Sie in der Ergebnisobjektdefinition.
div
- Ein HTML-div-Element im DOM, an dem das Suchelement normalerweise
und in den Suchergebnissen. Normalerweise würde das Suchelement-JavaScript
dieses div-Element auszufüllen, aber dieser Callback kann die automatische Darstellung der Ergebnisse stoppen.
und verwenden Sie
div
, um die Ergebnisse selbst zu rendern.
Wenn dieser Callback einen true
-Wert zurückgibt, springt das Suchelement-JavaScript zu seinem
in der Fußzeile
zu arbeiten.
Beispiel-Callback für Ergebnisausgabe
Das Beispiel resultsReady
-Callback in
Der Beispielaufruf-Callback für Ergebnisse überschreibt die Standardpräsentation.
von Werbeaktionen und Ergebnissen durch einen sehr einfachen Ersatz.
const myResultsReadyCallback = function(name, q, promos, results, resultsDiv) {
const makePromoElt = (promo) => {
const anchor = document.createElement('a');
anchor.href = promo['url'];
anchor.target = '_blank';
anchor.classList.add('gs-title');
const span = document.createElement('span');
span.innerHTML = 'Promo: ' + promo['title'];
anchor.appendChild(span);
return anchor;
};
const makeResultParts = (result) => {
const anchor = document.createElement('a');
anchor.href = result['url'];
anchor.target = '_blank';
anchor.classList.add('gs_title');
anchor.appendChild(document.createTextNode(result['visibleUrl']));
const span = document.createElement('span');
span.innerHTML = ' ' + result['title'];
return [anchor, span];
};
const table = document.createElement('table');
if (promos) {
for (const promo of promos) {
const row = table.insertRow(-1);
const cell = row.insertCell(-1);
cell.appendChild(makePromoElt(promo));
}
resultsDiv.appendChild(table);
resultsDiv.appendChild(document.createElement('br'));
}
if (results) {
const table = document.createElement('table');
for (const result of results) {
const row = table.insertRow(-1);
const cell = row.insertCell(-1);
const [anchor, span] = makeResultParts(result);
cell.appendChild(anchor);
const cell2 = row.insertCell(-1);
cell2.appendChild(span);
}
resultsDiv.appendChild(table);
}
return true;
};
Diesen Callback in window.__gcse:
installieren
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
web: {
ready: myResultsReadyCallback,
},
};
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Wie beim Callback für den Suchstart ist die obige Anleitung eine von vielen Möglichkeiten, den Callback im
__gcse
-Objekt.
Callback für gerenderte Bilder/Websuchergebnisse
Diese Callbacks werden aufgerufen, bevor das Suchelement-JavaScript die Seite rendert. in der Fußzeile. Beispielanwendungsfälle wären z. B. ein Callback, der Ergebnisinhalte hinzufügt, die von der Suche nicht angezeigt, wie das Kästchen Speichern oder Informationen, die nicht automatisch gerendert wird oder ein Callback ist, mit dem Schaltflächen für weitere Informationen hinzugefügt werden.
Wenn für einen gerenderten Callback mit Ergebnis Informationen benötigt werden, die in den promos
- und
results
des Callbacks für Ergebnisse, kann diese wie folgt zwischen ihnen übergeben werden:
callback(gname, query, promoElts, resultElts);
gname
- Identifizierender String des Suchelements
query
- Suchstring.
promoElts
- Ein Array der DOM-Elemente, die Angebote enthalten.
resultElts
- Ein Array der DOM-Elemente, die Ergebnisse enthalten.
Es gibt keinen Rückgabewert.
Beispiel-Callback für gerenderte Ergebnisse
Das Beispiel resultsRendered
-Callback in
Der Beispiel-Callback für gerenderte Ergebnisse fügt ein Dummy-Keep-Element hinzu.
für jedes bevorzugte Suchergebnis und jedes Ergebnis an.
myWebResultsRenderedCallback = function(name, q, promos, results) {
for (const div of promos.concat(results)) {
const innerDiv = document.createElement('div');
innerDiv.appendChild(document.createTextNode('Keep: '));
const checkBox = document.createElement('input');
checkBox.type = 'checkbox';
checkBox.name = 'save';
innerDiv.appendChild(checkBox);
div.insertAdjacentElement('afterbegin', innerDiv);
}
};
Diesen Callback in window.__gcse:
installieren
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
web: {
rendered: 'myWebResultsRenderedCallback',
},
};
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Wenn für den gerenderten Callback für Ergebnisse Folgendes erforderlich ist:
Informationen, die an den results ready-Callback übergeben wurden, können diese Daten zwischen
die Callbacks. Das folgende Beispiel zeigt eine von vielen Möglichkeiten, einen Bewertungswert von
richSnippet
vom Callback bereit für die Ergebnisse an die gerenderten Ergebnisse
zurück.
const makeTwoPartCallback = () => {
let saveForRenderCallback;
const readyCallback = (name, q, promos, results, resultsDiv) =>
{
saveForRenderCallback = [];
for (const result of results) {
const {
richSnippet: {
answer = []
} = {},
} = result;
const firstAnswer = answer[0];
if (firstAnswer) {
const upVotes = firstAnswer['upvotecount'];
if (upVotes) {
saveForRenderCallback.push(
{upvotes: parseInt(upVotes, 10)}
);
continue;
}
}
saveForRenderCallback.push({});
}
};
const renderedCallback = (name, q, promos, results) => {
for (let i = 0; i < results.length; ++i) {
const div = results[i];
const votes = saveForRenderCallback[i]['upvotes'];
if (votes) {
const innerDiv = document.createElement('div');
innerDiv.innerHTML = '<b>Upvotes: ' + votes + '</b>';
div.insertAdjacentElement('afterbegin', innerDiv);
}
}
};
return {readyCallback, renderedCallback};
};
__gcse
einrichtest:
const {
readyCallback: webResultsReadyCallback,
renderedCallback: webResultsRenderedCallback,
} = makeTwoPartCallback();
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
web: {
ready: webResultsReadyCallback,
rendered: webResultsRenderedCallback,
},
};
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:kdroeu4mwju"></script>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Weitere Callback-Beispiele
Weitere Callback-Beispiele finden Sie in der Weitere Callback-Beispiele.
Angebots- und Ergebniseigenschaften
In der JSDoc-Notation sind dies die Eigenschaften von promotion- und result-Objekte. Hier sind alle Eigenschaften aufgelistet, die vorhanden sein können. Viele der Properties sind vorhanden. von den Details der Werbeaktion oder des Suchergebnisses ab.
<ph type="x-smartling-placeholder">{ content: string, image: { height: number, url: string, width: number, }, title: string, url: string, visibleUrl: string, }
{ content: string, contentNoFormatting: string, contextUrl: string, // For image search results only fileFormat: string, image: { // For image search reseults only height: number, url: string, width: number, }, perResultLabels: !Array<{ anchor: string, label: string, labelWithOp: string, }>, richSnippet: !Array<!Object>, // For web search results only thumbnailImage: { height: number, url: string, width: number, }, title: string, titleNoFormatting: string, url: string, visibleUrl: string, }
richSnippet
in results hat den lockeren Typ eines Arrays:
Objekte. Die Werte der Einträge in diesem Array werden vom
strukturierte Daten
die auf der Webseite für die einzelnen Suchergebnisse gefunden werden. Eine Website mit Rezensionen kann beispielsweise
strukturierte Daten, mit denen dieser Array-Eintrag richSnippet
hinzugefügt wird:
'review': { 'ratingstars': '3.0', 'ratingcount': '1024', },
Programmable Search Element Control API (Version 2)
Das Objekt google.search.cse.element
veröffentlicht Folgendes:
statische Funktionen:
Funktion | Beschreibung | ||||||
---|---|---|---|---|---|---|---|
.render(componentConfig, opt_componentConfig) |
Rendert ein Suchelement.
Parameter
|
||||||
.go(opt_container) |
Gibt alle Tags und Klassen für Suchelement im angegebenen Container wieder.
Parameter
|
||||||
.getElement(gname) |
Ruft das Elementobjekt nach gname ab. Wenn nicht gefunden, wird null zurückgegeben.
Das zurückgegebene
Der folgende Code führt die Abfrage „news“ aus im Suchelement "element1" ein: var element = google.search.cse.element.getElement('element1'); element.execute('news'); |
||||||
.getAllElements() |
Gibt eine Zuordnung aller erfolgreich erstellten Elementobjekte mit dem Schlüssel gname zurück. |