Knowledge Graph-Such-Widget

Das Such-Widget des Knowledge Graph ist ein JavaScript-Modul, mit dem Sie in Eingabefelder auf Ihrer Website einfügen. Nutzende beginnen mit der Eingabe von Text und dem Widget. findet mit der Knowledge Graph Search API relevante Übereinstimmungen während der Eingabe.

Beispiel für ein Such-Widget

Funktionen

  • Browserübergreifend: Diese Version wurde in der bewährten und browserübergreifenden Closure-Bibliothek geschrieben und zu reinem JavaScript kompiliert.
  • Domainübergreifend. Dank JSONP sind keine Proxyserver erforderlich.
  • auf Google-Servern gehostet.
  • Kostenlos! (Es gelten die standardmäßigen Google API-Nutzungsbedingungen.)

Jetzt ausprobieren

Vorteile des Knowledge Graph-Such-Widgets

  • Lassen Sie Ihre Nutzer weniger Text eingeben, um mehr Daten einzugeben.
  • Einfachere und genauere Dateneingabe
  • Mit Bildern und Beschreibungen entlastest du deine Nutzer.
  • Vermeiden Sie doppelte Namen für dieselbe Entität: Puff Daddy, P. Diddy und Sean Combs beziehen sich alle auf /en/sean_combs.

Knowledge Graph-Such-Widget zu Ihrer Website hinzufügen

Um das Such-Widget des Knowledge Graph zu einer Seite hinzuzufügen, musst du Folgendes angeben: in den Quellcode Ihrer Website ein. Sie benötigen eine API-Schlüssel damit das Widget auf die Google Knowledge Graph API zugreifen kann.

Code zum Einfügen in Ihre Website

Füge Folgendes in die <head> deines HTML-Dokuments ein:

<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/knowledge/kgsearch/widget/1.0/widget.min.css">
<style>
  .kge-search-picker {
    width: <DROPDOWN_MENU_WIDTH>;
  }
</style>
<script type="text/javascript" src="https://www.gstatic.com/knowledge/kgsearch/widget/1.0/widget.min.js"></script>

Verwenden Sie dann in Ihrem Dokument <body> ein Eingabefeld mit einem ID so ab:

<input type="text" id="myInput">
<script type="text/javascript">
  KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});
</script>

API-Schlüssel erhalten und verwenden

Wenn Sie einen API-Schlüssel erhalten, kann Ihre Anwendung Suggest-Anfragen senden. Ohne API-Schlüssel verwenden, funktioniert das Widget nicht. Wenn Sie noch keinen API-Schlüssel haben, folgen Sie der Anleitung auf der Seite Voraussetzungen um eines zu erhalten.

Sobald Sie einen Schlüssel erhalten haben, können Sie ihn mithilfe von Code wie den folgenden aussehen:

KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});

Such-Widget konfigurieren

Ihr JavaScript kann KGSearchWidget() mit einem leeren dritten Argument wie folgt aufrufen: wie oben dargestellt. Oder Sie verwenden dieses dritte Argument, um eine Konfiguration zu übergeben. -Objekt und gibt verschiedene Filter, Einschränkungen und Event-Handler an.

Konfigurationsobjekt übergeben

Das Knowledge Graph-Such-Widget akzeptiert einen optionalen Konfigurationsparameter. So können Sie eine Datenstruktur mit mehreren Konfigurationsoptionen füllen, und an das Widget übergeben, wie im folgenden Beispiel gezeigt.

var config = {
  'limit': 10,
  'languages': ['en', 'fr'],
  'types': ['Person', 'Movie'],
  'maxDescChars': 100,
};
config['selectHandler'] = function(e) {
  alert(e.row.name + ' selected');
};
config['highlightHandler'] = function(e) {
  alert(e.row.name + ' highlighted');
};
KGSearchWidget(<API_KEY>, document.getElementById('myInput'), config);

Konfigurationsoptionen

In der folgenden Tabelle werden die Konfigurationsoptionen beschrieben, die Sie an Such-Widget des Knowledge Graph aus.

Name Typ Standardeinstellung Beschreibung
Sprachen Array(String) Englisch Eine Liste der Sprachcodes (definiert in ISO 639-1), die dazu führen, dass die Suche in allen Sprachen durchgeführt wird. angegeben ist. Die Ergebnisse werden in der ersten aufgeführten Sprache in der ersten Sprache in der Liste angezeigt, deren Name für die Entität. Auf Englisch ist die Abdeckung am stärksten. Dieser Wert ist transparent an die Search API übergeben.
Beispiel: Die Sprachen sind auf [fr, en], the widget will show descriptions for entities in the primary language, French, when possible. Otherwise, it will fall back to English as a secondary language. eingestellt.
Limit Ganzzahl 20 Maximale Anzahl von Ergebnissen im Drop-down-Menü.
Typen Array(String) Alle Typen Nur Entitäten zurückgeben, die mit einem der angegebenen übereinstimmen Entität . Wenn dieser Parameter weggelassen wird, werden Übereinstimmungen eines beliebigen Entitätstyps zurückgegeben.
maxDescChars Ganzzahl Unbegrenzt Die maximale Anzahl an Zeichen in der detaillierten Beschreibung jeder Entität. Inhalte, die länger als „maxDescChars“ sind, werden abgeschnitten.
selectHandler Funktion null Die Callback-Funktion, die aufgerufen wird, wenn eine Zeile ausgewählt wird. Das Argument der Callback-Funktion ist ein Ereignis und enthält ein row-Attribut mit Informationen zur ausgewählten Zeile. Weitere Informationen finden Sie unter Event-Handler verwenden finden Sie ein Beispiel für die Verwendung dieses Callbacks.
highlightHandler Funktion null Die Callback-Funktion, die aufgerufen wird, wenn der Nutzer den Mauszeiger auf die Zeile bewegt. Das Argument der Callback-Funktion ist ein -Ereignis und enthält Attribut row mit Informationen zur Zeile, die zuvor ausgewählt.
Beachten Sie, dass viele Geräte, z. B. Hardware mit Touchscreen, keine Ereignis generieren.
Weitere Informationen finden Sie unter Event-Handler verwenden. finden Sie ein Beispiel für die Verwendung dieses Callbacks.

Event-Handler implementieren

Das Such-Widget des Knowledge Graph löst die folgenden Ereignisse im Kontext der Eingabe, mit der sie initialisiert wird. Sie können einen Rückruf im config-Objekt, um die Implementierung von Handler für diese Ereignisse.

selectHandler – Dieses Ereignis wird ausgelöst, wenn ein Nutzer ein Element auswählt. aus der Liste der Vorschläge auswählen. Das Ereignis wird von einem Datenobjekt begleitet, in dem event.row sind die Daten der ausgewählten Zeile. event.row.name und event.row.id stehen für den Namen und ID des ausgewählten Elements. Das folgende Codefragment zeigt, wie Sie selectHandler schon.

KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {
  "selectHandler": function(e) {
    alert("selected " + e.row.name);
  }
});

highlightHandler – Dieses Ereignis wird ausgelöst, wenn ein Element markiert wird wenn der Nutzer die Maus darüber bewegt. Das folgende Snippet zeigt, wie Sie testen können, highlightHandler schon.

KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {
  "highlightHandler": function(e) {
    alert("highlighted " + e.row.name);
  }
});

Hilfe und Feedback

Falls Sie Fragen, Fehlerberichte oder Feedback zum Knowledge Graph Search API verwenden, verwenden Sie Hilfeforum: