Freebase-Vorschlags-Widget

  1. Freebase Suggest
  2. Freebase Suggest zu Ihrer Website hinzufügen
  3. Konfigurationsoptionen
  4. CSS ändern
  5. Funktionsweise von Ereignissen
  6. Weitere Informationen und FAQs
  7. Beispiele und Rezepte

Über Freebase Suggest

Freebase Suggest ist ein jQuery-Plug-in, das automatische Vervollständigungen für Freebase-Themen zu Suchfeldern auf Ihrer Website hinzufügt. Nutzer beginnen mit der Texteingabe und das Widget schlägt relevante Übereinstimmungen aus Millionen von Themen auf Freebase.com oder einer Untergruppe von Typen wie „Personen“, „Standorte“ oder „Tiere“ vor. Anhand von Fly-outs kann der Nutzer den richtigen Artikel auswählen, der durch eine Freebase-ID eindeutig identifiziert wird.

Freebase Suggest.png

Features

Jetzt ausprobieren

Freebase Suggest in freier Wildbahn

Websites, die bekanntermaßen Freebase Suggest verwenden:

Vorteile von Freebase Suggest

  • Mit der automatischen Vervollständigung müssen Nutzer weniger Daten eingeben, um mehr Daten einzugeben.
  • Die Dateneingabe ist unterhaltsam und präzise.
  • Verringern Sie die kognitive Auslastung Ihrer Nutzer dank der Bilder und Beschreibungen in den Fly-outs zu Themen.
  • Verwenden Sie starke Kennzeichnungen anstelle von Keywords. Der Name „Sting“ ist mehrdeutig, die Freebase-IDs /en/sting und /en/sting_1959 jedoch nicht.
  • Vermeiden Sie doppelte Namen für dieselbe Entität. Puff Daddy, P. Diddy, Sean Combs beziehen sich alle auf /en/sean_combs.

Freebase Suggest zu Ihrer Website hinzufügen

Fügen Sie den folgenden Code in den Quellcode Ihrer Website ein, um Freebase Suggest zu Ihrer Webseite hinzuzufügen. Sie können auch einen API-Schlüssel abrufen und verwenden, um die Funktionen von Freebase Suggest zu erweitern.

Code für die Website

Fügen Sie Folgendes in die Datei <head> Ihres HTML-Dokuments ein:

<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/freebase/suggest/4_1/suggest.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/freebase/suggest/4_1/suggest.min.js"></script>
<script type="text/javascript">
$(function() {
  $("#myinput").suggest({filter:'(all type:/film/director)'});
});
</script>

Verwenden Sie dann in Ihrem Dokument <body> ein Eingabefeld, das ungefähr so aussieht:

<input type="text" id="myinput"/>

API-Schlüssel abrufen

Durch das Abrufen eines API-Schlüssels kann Ihre Anwendung Vorschläge für Suggest senden. Ohne API-Schlüssel funktioniert das Widget zu Testzwecken. Folgen Sie der Anleitung auf der Seite Erste Schritte, um einen Schlüssel zu erhalten.

Sobald Sie einen Schlüssel erhalten haben, übergeben Sie ihn mit folgendem Befehl an Freebase Suggest:

$(function() {
  $("#myinput").suggest({ "key" : "<your api key>"});
});

Konfigurationsoptionen

In der folgenden Tabelle werden die Konfigurationsoptionen für Freebase Suggest beschrieben.

Name Typ Standard Beschreibung
Erweitert Boolesch true Bei „true“ werden Inline-name:value-Paare in der Eingabe als zusätzliche Filtereinschränkungen geparst und verarbeitet. Für 'bob type:artist contributed_to:"Love and Theft"' wird beispielsweise die zusätzliche Filtereinschränkung '(all type:artist contributed_to:"Love and Theft")' an die Suche übergeben. Wenn „Erweitert“ auf „true“ gesetzt ist, erkennt Freebase Suggest die Freebase-IDs und MIDs, sodass man direkt anhand der ID oder MID nach einer Entität suchen kann.
genau passend Boolesch false Wenn der Wert „true“ ist, wird angegeben, dass die Search API nur genaue Übereinstimmungen zurückgibt (von denen in der Eingabe). Dieser Wert wird transparent an die Search API übergeben.
Filter String null Sie können Standardfiltereinschränkungen festlegen, die transparent als Filterparameter an die Search API übergeben werden. Wenn Sie beispielsweise Freebase Suggest auf die Suche nach Hochschulen und/oder Universitäten beschränken möchten, verwenden Sie „(all type:/education/university)“ als Filter. Eine umfassende Liste der verfügbaren Suchfilter finden Sie unter Search API oder Texteinschränkungen.
Schlüssel String null Gib einen API-Schlüssel für die von service_url + service_path angegebene Standard-Search API an. In der APIs Console können Sie einen abrufen.
lang String null Für den Parameter lang kann eine durch Kommas getrennte Liste von Sprachcodes verwendet werden. Dadurch wird die Suche in allen angegebenen Sprachen durchgeführt und die Ergebnisse werden in der ersten Sprache aufgelistet, die in der ersten Sprache der Liste aufgeführt ist, und mit einem Namen für die Entität in der Liste angezeigt. Derzeit werden 18 Sprachen unterstützt: en (englisch), es (spanisch), fr (französisch), de (deutsch), italienisch, pt (portugiesisch), zh (chinesisch), ja (japanisch), ko (koreanisch), ru (russisch), sv (schwedisch), n (dänisch), n (dänisch), n (dschisch), Englisch ist mit Abstand die meiste Abdeckung und die Standardsprache ist. Dieser Wert wird transparent an die Search API übergeben.
Bewertung String null Mit dem Parameter scoring können Sie steuern, welche Komponenten des Relevanzwerts zur Berechnung des Endwerts verwendet werden. Dieser Wert wird transparent an die Search API übergeben.
  • entity: Verwenden Sie sowohl den FREEBASE- als auch den Google-Relevanzwert.Standardmäßig werden fehlende Google-Scores auf 1, 0 gesetzt. Das ist die Standardeinstellung.
  • freebase: Nur den Freebase-Relevanzwert verwenden.
  • schema: wird bei der Suche nach Schemaentitäten wie Typen, Properties oder Domains verwendet. Die Anzahl der Verknüpfungen von Schemaentitäten wird unterschiedlich berechnet.
buchstabieren String always Gültige Werte sind always, no_results und no_spelling. Wenn eine Schreibweise angefordert wird und bei der Suche eine Rechtschreibkorrektur zurückgegeben wird, zeigt Freebase Suggest die Korrektur in der Vorschlagsliste an. Dieser Wert wird transparent an den Suchdienst übergeben.
Flyout Boolesch, bottom true Legt fest, ob eine Flyout-Beschreibung angezeigt wird, wenn der Mauszeiger darauf bewegt wird. Falls bottom, Flyout unten in der Vorschlagsliste anzeigen. Wenn die Liste „Vorschlagen“ über dem Eingabefeld erscheint, wird das Flyout oben auf der Liste angezeigt. Wenn "true" festgelegt ist, versucht Google Suggest, das Flyout links oder rechts in der Liste anzuzeigen.
Vorschlag_neu String null Text, der unter der Vorschlagsliste angezeigt werden soll. Bei Auswahl wird ein fb-select-new ausgelöst.
CSS Object Die standardmäßigen CSS-Klassennamen, die für die verschiedenen Freebase Suggest-Elemente verwendet werden, überschreiben. Weitere Informationen finden Sie unter CSS ändern.
CSS-Präfix String null Sie können ein Präfix angeben, das den Klassennamen der Suggest-Elemente vorangestellt werden soll. Wenn css_prefix z. B. "foo-" ist, werden die Containernamen "foo-fbs-pane" und "foo-fbs-flyoutpane" angezeigt.
show_id Boolesch true Zeigt den von der Suche zurückgegebenen Wert notable an. Wenn sie nicht verfügbar ist, wird die ID des Artikels angezeigt.
service_url String Wert ist https://www.googleapis.com/freebase/v1 Dies ist die Basis-URL für den Google Suggest-Dienst.
Dienstpfad String /search service_url + service_path = URL zum Google Suggest-Dienst.
Flyout_Service_URL String null Die Basis-URL des Flyout-Diensts. Wenn der Wert null ist, wird standardmäßig service_url verwendet.
Flyout_Service_Pfad String Wert ist /topic${id}?filter=suggest&limit=3&key=${key} flyout_service_url + flyout_service_path = URL zum Flyout. '${id}' und '{key}' werden durch die Hover-Element-ID bzw. den API-Schlüssel ersetzt.
Flyout_image_service_url String null Die Basis-URL für das Bild im Flyout. Wenn der Wert null ist, wird standardmäßig service_url verwendet.
Flyout_image_service_path String /image${id}?maxwidth=75&key=${key} flyout_image_service_url + flyout_image_service_path = URL zum Bilddienst. '${id}' und '{key}' werden durch die Hover-Element-ID bzw. den API-Schlüssel ersetzt.
Übergeordnetes Element für Flyout String (jQuery-Selektor) null Standardmäßig wird der Flyout-Container an den Dokumenttext angehängt und absolut positioniert. flyout_parent gibt ein anderes übergeordnetes Element an und der Flyout wird nicht absolut positioniert.
align String null Wenn „align“ nicht festgelegt ist, wird die Liste „Vorschlagen“ je nach Position im Dokument an der linken bzw. rechten Position des Eingabefelds ausgerichtet. Wenn Sie dieses Verhalten überschreiben und die Ausrichtung explizit festlegen möchten, legen Sie align auf "left" oder "right" fest.
Status Array[4](String) Text eingeben, um Vorschläge zu erhalten...", " wird gesucht...", "Element aus der Liste auswählen:", "Ein Fehler ist aufgetreten. Bitte versuche es später noch einmal."] Statusmeldungen, die in den vier verschiedenen Phasen von Google Suggest angezeigt werden; [0] Wenn das Eingabefeld leer ist und fokussiert wird. [1] Beim Abrufen der Ergebnisse, [2] beim Anzeigen der Ergebnisse, [3] wenn beim Suggest-Dienst ein Fehler auftritt. Sie können diese Standardstatusmeldungen überschreiben, indem Sie ein anderes String-Array für die vier verschiedenen Phasen übergeben.
Übergeordnetes Element String (jQuery-Selektor) null Standardmäßig wird die Liste der Vorschläge an den Dokumenttext angehängt und absolut positioniert. Verwenden Sie parent, um ein anderes übergeordnetes Element anzugeben, und die Liste wird nicht absolut positioniert.
animieren Boolesch false Bei Einstellung auf "true" wird die Anzeige der Vorschlagsliste mit dem jQuery-Schieb-Effekt animiert.
Xhr_Verzögerung Ganzzahl (ms) 200 Gibt eine Verzögerung vor der Rückgabe von Ergebnissen an. Das ist nützlich, wenn mql_filters komplex ist und die Suggest API mehr oder ähnliche Zeit zum Antworten benötigt als die hartcodierte Verzögerung. Dies kann die Nutzerfreundlichkeit und die Last erhöhen.
Z-Index Ganzzahl null Legt den Z-Index der äußeren Container fest (fbs-pane, fbs-flyoutpane). Dies ist nützlich, wenn Sie Freebase Suggest in Dialogfeldern verwenden, damit die Suggest-Elemente oben angezeigt werden.

CSS ändern

Die von Freebase Suggest verwendeten Standard-CSS-Klassen können überschrieben werden, indem eine Zuordnung alternativer Werte für die CSS-Klassennamen mit der Konfigurationsoption css übergeben wird. In der folgenden Tabelle werden die Klassen im Standard-CSS-Code beschrieben.

Bereich Der äußere Container der Vorschlagsliste.

Standardeinstellung: 'fbs-pane'
list Die Vorschlagsliste.

Standardeinstellung: 'fbs-list'
Element Die Listenvorschläge.

Standardeinstellung: 'fbs-item'.
item_name Das Element, das den Namen des Artikels enthält.

Standardeinstellung: 'fbs-item-name'
ausgewählt Das aktuell markierte/ausgewählte Element. Standardeinstellung: 'fbs-selected'.
Status Das Element mit den Statusmeldungen. Standardeinstellung: 'fbs-status'.
item_type [Artikeltyp] Das Element mit dem beachtenswerten Typ eines Elements. Standardeinstellung: 'fbs-item-type'.
Flyoutpane Der äußere Container zum Flyout.

Standardeinstellung: 'fbs-flyoutpane'

Beispiel:

$("#myinput").suggest({
  "css": {
    "pane": "custom-pane-class",
    "list": "custom-list-class"
  }
});

So funktionieren Ereignisse

Freebase Suggest löst die folgenden Ereignisse im Kontext der Eingabe aus, mit der sie initialisiert wird.

fb-select: Wenn ein Element aus der Vorschlagsliste ausgewählt wird. Zu dem Ereignis gehört ein Datenobjekt, in dem data.name und data.id für den Namen und die ID des ausgewählten Elements stehen.

$("#myinput").suggest().bind("fb-select", function(e, data) { ... });

fb-select-new: Wenn die Option suggest_new aktiviert ist, wird dieses Ereignis ausgelöst, wenn das Element „suggest_new“ ausgewählt ist. Zu dem Ereignis gehört auch der Eingabewert.

$("#myinput").suggest({'suggest_new': 'This is the suggest new text'}).bind("fb-select-new", function(e, val) { ... });

FAQs und weitere Informationen

Fragen, Fehlerberichte und Feedback sind in der Freebase Developers-Google-Gruppe oder in der Problemliste willkommen. Wählen Sie die Komponente ""Search/Suggest"" aus.

Ich habe gerade ein neues Thema erstellt, das aber in „Vorschlagen“ nicht angezeigt wird. Woran liegt das?

Freebase Suggest verwendet die Search API für die Bereitstellung seiner Ergebnisse und wird nahezu in Echtzeit aktualisiert. Neue Themen werden in der Regel innerhalb von etwa einer Minute angezeigt. Wenn das System jedoch stark ausgelastet ist, kann es auch länger dauern.

Beispiele und Rezepte

Grundlegende Nutzung

$("#example1")
 .suggest()
 .bind("fb-select", function(e, data) {
   alert(data.name + ", " + data.id);
});

Jetzt ausprobieren

Neue Vorschläge

$("#example2")
 .suggest({
   "suggest_new": "Click on me if you don't see anything in the list"
 })
 .bind("fb-select", function(e, data) {
   alert(data.name + ", " + data.id);
 })
 .bind("fb-select-new", function(e, val) {
   alert("Suggest new: " + val);
 });

Jetzt ausprobieren

Vorschläge mithilfe eines Filters einschränken

Filme vorschlagen, die unter der Regie von Steven Spielberg angeboten werden.

$("#example5")
.suggest({
   "filter": "(all type:/film/film contributor:\"Steven Spielberg #directed_by\")"
})
.bind("fb-select", function(e, data) {
   alert(data.name + ", " + data.id);
});

Jetzt ausprobieren

Aus dem Textfeld filtern

Sie können die Ergebnisse filtern, indem Sie eine der Filtereinschränkungen direkt in das Feld „Vorschlagen“ eingeben. Wenn Sie beispielsweise nach Büchern zum Thema Gartenarbeit suchen, versuchen Sie Folgendes:

gardening type:/book/book
gardening type:book

Die Ergebnisse lassen sich mit beliebigen Meta-Schema-Sucheinschränkungen filtern. Beispiel:

contributed_to:"Saving Private Ryan" type:/people/person

Wie unter Konfigurationsoptionen angegeben, werden lang, scoring, spell und exact transparent an die Search API übergeben. Sie können sie auch inline überschreiben. Wenn Freebase Suggest beispielsweise mit lang:"en" initialisiert wurde und Sie auch nach französischen Namen suchen möchten, versuchen Sie Folgendes:

babar lang:fr,en

Weitere Filter- und Sucheinschränkungen finden Sie im Cookbook zur Suche.