- Freebase Suggest
- Freebase Suggest zu Ihrer Website hinzufügen
- Konfigurationsoptionen
- CSS ändern
- Funktionsweise von Ereignissen
- Weitere Informationen und FAQs
- 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.
Features
- Browserübergreifend – basierend auf jQuery, getestet auf IE 7 und höher, FF 2 und höher, Safari 3 und höher und Chrome (Version 1.4.4 oder höher)
- Domainübergreifend. Dank JSONP sind keine Proxyserver erforderlich.
- Von Google auf gstatic.com gehostet
- Kostenlos! Es gelten die standardmäßigen Nutzungsbedingungen für Freebase und die Nutzungsbedingungen für die Google Developer API.
Freebase Suggest in freier Wildbahn
Websites, die bekanntermaßen Freebase Suggest verwenden:
- WSJ Book-Rezensionen
- ContentTagger.org – Tagging-Demo der Guardian-Zeitung
- location.ws – Fotos mit Freebase-Entitäten taggen
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_2/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_2/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.
|
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 /search?filter=(all mid:${id})&output=(notable:/client/summary description type)&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 | Wert ist /image${id}?maxwidth=75&key=${key}&errorid=/freebase/no_image_png |
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: ' |
list | Die Vorschlagsliste.
Standardeinstellung: ' |
Element | Die Listenvorschläge.
Standardeinstellung: ' |
item_name | Das Element, das den Namen des Artikels enthält.
Standardeinstellung: ' |
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: ' |
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
- Freebase Suggest-Rezepte: Geben Sie Tipps zur Verwendung von Suggest in unserem Wiki.
Grundlegende Nutzung
$("#example1") .suggest() .bind("fb-select", function(e, data) { alert(data.name + ", " + data.id); });
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); });
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); });
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.