Programmable Search Element Control API

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 gname, nutzt die Programmable Search Engine die letzte Komponente im Seite.

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.

true Wenn dieser Parameter nicht vorhanden ist oder auf „true“ gesetzt ist, legen wir ein Cookie nur für ungültige Zugriffe und verwenden die lokale Speicherung nur bei Zugriffen, die mit Einwilligung der Nutzer*innen erhoben wurden.

false Wenn Sie diesen Parameter auf „false“ setzen legen wir eine ungültige und die lokale Speicherung sowohl bei Zugriffen mit als auch bei Zugriffen ohne Einwilligung verwenden.

Standardwert: false

Verwendungsbeispiel: <div class="gcse-search" data-ivt="true"></div>

Suchergebnisse

searchresults-only

mobileLayout String

Gibt an, ob die mobilen Layout-Stile für Mobilgeräte verwendet werden sollen.

enabled Verwendet das mobile Layout nur für Mobilgeräte.

disabled Das Layout für Mobilgeräte wird auf keinem Gerät verwendet.

forced Verwendet das mobile Layout für alle Geräte.

Standardwert: enabled

Verwendungsbeispiel: <div class="gcse-search" data-mobileLayout="disabled"></div>

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 true wird die Bildersuche aktiviert. Die Bildergebnisse werden separaten Tab.

Suchergebnisse

searchresults-only

defaultToImageSearch Boolesch Nur verfügbar, wenn Bildersuche im Steuerfeld der Programmable Search Engine aktiviert.

Wenn true festgelegt ist, werden auf der Suchergebnisseite Ergebnisse der Bildersuche angezeigt. ist standardmäßig aktiviert. Die Webergebnisse sind auf einem separaten Tab verfügbar.

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 classic, column oder popup sind.

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: large, small, filtered_cse, 10.

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 jpg, gif, png, bmp, svg, webp, ico und raw.

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":<div class="gcse-search" data-image_as_oq="term1 term2"></div>

Beliebig

image_as_rights String Nur verfügbar, wenn Bildersuche im Steuerfeld der Programmable Search Engine aktiviert.

Lizenzbasierte Filter.

Unterstützte Werte sind cc_publicdomain, cc_attribute, cc_sharealike, cc_noncommercial, cc_nonderived und Kombinationen dieser Werte.

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: <div class="gcse-search" data-image_as_sitesearch="example.com"></div>

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: mono, gray und color.

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.

Unterstützte Werte

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 red, orange, yellow, green, teal, blue, purple, pink, white, gray, black und brown.

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: <div class="gcse-search" data-image_filter="0"></div>

Beliebig

image_gl String Nur verfügbar, wenn Bildersuche im Steuerfeld der Programmable Search Engine aktiviert. Verbesserte Suchergebnisse, deren Ursprungsland mit dem Parameterwert übereinstimmt.

Unterstützte Werte

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: icon, small, medium, large, xlarge, xxlarge oder huge..

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: <div class="gcse-search" data-image_sort_by="date"></div>

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 clipart (Clipkunst), face (Gesichter von Personen), lineart (Linienzeichnungen), stock (Stockfotos), photo (Fotos) und animated (Animierte GIFs).

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: <div class="gcse-search" data-webSearchQueryAddition="term1 term2"></div>

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">
    </ph>
  • Eine Ganzzahl zwischen 1 und 20
  • small: fragt eine kleine Ergebnismenge an, in der Regel 4 Ergebnisse pro Seite.
  • large: Fordert eine große Ergebnismenge an, in der Regel 8 Ergebnisse pro Seite an.
  • filtered_cse: fordert bis zu zehn Ergebnisse pro Seite für eine maximal 10 Seiten oder 100 Ergebnisse.
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":<div class="gcse-search" data-as_oq="term1 term2"></div>

Beliebig
as_rights String Lizenzbasierte Filter.

Unterstützte Werte sind cc_publicdomain, cc_attribute, cc_sharealike, cc_noncommercial, cc_nonderived und Kombinationen dieser Werte.

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: <div class="gcse-search" data-as_sitesearch="example.com"></div>

Beliebig
cr String Beschränkt die Suchergebnisse auf Dokumente aus einem bestimmten Land.

Unterstützte Werte

Verwendungsbeispiel: <div class="gcse-search" data-cr="countryFR"></div>

Beliebig
filter String Automatisches Filtern von Suchergebnissen

Unterstützte Werte: 0/1

Verwendungsbeispiel: <div class="gcse-search" data-filter="0"></div>

Beliebig
gl String Verbesserte Suchergebnisse, deren Ursprungsland mit dem Parameterwert übereinstimmt.

Dies funktioniert nur in Verbindung mit der Einstellung für den Sprachwert.

Unterstützte Werte

Verwendungsbeispiel: <div class="gcse-search" data-gl="fr"></div>

Beliebig
lr String Beschränkt die Suchergebnisse auf Dokumente in einer bestimmten Sprache.

Unterstützte Werte

Verwendungsbeispiel: <div class="gcse-search" data-lr="lang_fr"></div>

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: <div class="gcse-search" data-sort_by="date"></div>

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">
</ph> <ph type="x-smartling-placeholder"></ph>
Callback-Sequenzdiagramm
Sequenzdiagramm von Callbacks aus dem Suchelement-JavaScript

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.

<ph type="x-smartling-placeholder">
</ph>
Callbacks registrieren

  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 Methode render()-Funktion verwenden, oder alle Suchelemente mit der Funktion go() rendern

Der folgende Code zeigt, wie ein Suchfeld zusammen mit Suchergebnissen in einem div unter Verwendung des Parse-Tags explicit und des Initialisierungs-Callbacks:

<ph type="x-smartling-placeholder">
</ph> Beispiel für einen Initialisierungs-Callback

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>
Fügen Sie diesen JavaScript-Code nach <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).

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"></ph> Beispiel für einen Callback beim Starten der Suche
    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.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"></ph> Beispiel für bereite Callback-Ergebnisse
    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.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"></ph> Beispiel für einen Callback für gerenderte Ergebnisse
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.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"></ph> Beispiel für die Zusammenarbeit mit einem Callback mit Ergebnisausgabe in Verbindung mit Callback für Ergebnisse
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};
};
Installieren Sie bei der Einrichtung von __gcse diesen Callback mit folgendem Code:
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">
</ph> <ph type="x-smartling-placeholder"></ph>
Angebotseigenschaften
{
  content: string,
  image: {
    height: number,
    url: string,
    width: number,
  },
  title: string,
  url: string,
  visibleUrl: string,
}
<ph type="x-smartling-placeholder">
</ph>
Eigenschaften des Ergebnisobjekts
{
  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

Name Beschreibung
componentConfig Die Konfiguration für eine Programmable Search Element-Komponente. Gibt Folgendes an: <ph type="x-smartling-placeholder">
    </ph>
  • div (String|Element): Das id-Element des <div>- oder div-Elements, in dem das Programmierbare Suchelement gerendert werden soll.
  • tag (String): Der Typ der zu rendernden Komponente(n). Wenn opt_componentConfig angegeben ist, muss der Wert des Attributs tag searchbox sein. Zulässige Werte:
      .
    • search: Suchfeld und Suchergebnisse, die zusammen angezeigt werden
    • searchbox: Eine Suchfeldkomponente eines Programmable Search Element.
    • searchbox-only: Ein eigenständiges Suchfeld, das mit einem durch opt_componentConfig angegebenen Suchergebnisblock im zweispaltigen Layout gekoppelt wird.
    • searchresults-only: Ein eigenständiger Block mit Suchergebnissen. Suchanfragen werden durch einen in eine URL eingebetteten Suchparameter oder durch programmatische Ausführung ausgelöst.
  • gname (String): (Optional) Ein eindeutiger Name für diese Komponente. Falls nicht angegeben, generiert die Programmable Search Engine automatisch ein gname.
  • attributes (Objekt): Optionale Attribute in Form eines Schlüssel/Wert-Paars. Unterstützte Attribute.
opt_componentConfig Optional. Zweites Argument für die Komponentenkonfiguration. Verwendet in TWO_COLUMN um die Komponente searchresults bereitzustellen. Gibt Folgendes an: <ph type="x-smartling-placeholder">
    </ph>
  • div (String): Das id-Objekt des <div>- oder Das div-Element, in dem das Element gerendert werden soll.
  • tag (String): Der Typ der zu rendernden Komponente(n). Wann? opt_componentConfig angegeben ist, wird der Wert von tag Attribut muss searchresults sein. Außerdem ist der Wert des Attribut tag von componentConfig muss searchbox sein.
  • gname (String): (Optional) Ein eindeutiger Name für diese Komponente. Falls nicht generiert die Programmable Search Engine automatisch ein gname für dieses Komponente. Falls angegeben, muss er mit dem gname in componentConfig.
  • attributes (Objekt): Optionale Attribute in Form eines Schlüssel/Wert-Paars Paar zusammen. <ph type="x-smartling-placeholder"></ph> Unterstützte Attribute.
.go(opt_container) Gibt alle Tags und Klassen für Suchelement im angegebenen Container wieder.

Parameter

Name Beschreibung
opt_container Der Container mit den zu rendernden Search Element-Komponenten. Definieren entweder die ID des Containers (String) oder des Elements selbst. Wenn werden alle Programmable Search Element-Komponenten body Tag wird gerendert.
.getElement(gname) Ruft das Elementobjekt nach gname ab. Wenn nicht gefunden, wird null zurückgegeben.

Das zurückgegebene element-Objekt hat die folgenden Attribute:

  • gname: Der Name des Elementobjekts. Falls nicht angegeben: Programmable Search Engine generiert automatisch eine gname für das Objekt. Weitere Informationen
  • type: Der Elementtyp.
  • uiOptions: Die abschließenden Attribute, die zum Rendern des Elements verwendet werden.
  • execute – Funktion(String): Führt eine programmatische Abfrage aus.
  • prefillQuery – Funktion(String): füllt das Suchfeld vorab mit einer Abfrage aus ohne die Abfrage auszuführen.
  • getInputQuery – Funktion(): Ruft den aktuellen Wert ab, der in der Eingabe angezeigt wird. .
  • clearAllResults – Funktion(): Löscht das Steuerelement, indem alles außer Acht gelassen wird in das Suchfeld ein, falls vorhanden.

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.