Widżet wyszukiwania Grafu wiedzy to moduł JavaScript, który ułatwia dodawanie tematów do pól wejściowych w witrynie. Użytkownicy zaczynają wpisywać tekst, a widżecie za pomocą interfejsu API wyszukiwania Grafu wiedzy znajduje właściwe dopasowania.
Funkcje
- Tekst w różnych przeglądarkach – kod jest napisany w przetestowanych i działających w różnych przeglądarkach kodach Closure, a także skompilowany do czystego JavaScriptu.
- Międzydomenowe Dzięki JSONP nie są wymagane żadne serwery proxy.
- Hostowany na serwerach Google.
- Bezpłatne! (Obowiązują standardowe Warunki korzystania z interfejsu API Google).
Dlaczego warto korzystać z widżetu wyszukiwania w Grafie wiedzy?
- Pozwól użytkownikom na wpisanie mniej informacji, jeśli chcą wpisać więcej danych.
- Wprowadzanie danych jest łatwiejsze i dokładniejsze.
- Zmniejsz obciążenie poznawcze użytkowników, dodając obrazy i opisy.
- Unikaj powtarzania tych samych nazw dla tego samego podmiotu: Puff Daddy, P. Diddy, Sean Combs polecają
/en/sean_combs.
Dodawanie widżetu wyszukiwania Grafu wiedzy do witryny
Aby dodać do strony widżet wyszukiwania Grafu wiedzy, umieść w źródle witryny poniższy kod. Aby widżet mógł uzyskać dostęp do interfejsu Google Knowledge Graph API, musisz użyć klucza interfejsu API.
Kod do umieszczenia w witrynie
W polu <head> dokumentu HTML umieść:
<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>
Następnie w dokumencie <body> użyj pola do wprowadzania danych z pasującym identyfikatorem:
<input type="text" id="myInput">
<script type="text/javascript">
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});
</script>
Uzyskiwanie klucza interfejsu API i korzystanie z niego
Uzyskanie klucza interfejsu API umożliwia aplikacji wysyłanie żądań Suggest. Bez klucza interfejsu API widżet nie będzie działać. Jeśli nie masz jeszcze klucza interfejsu API, wykonaj instrukcje na stronie Wymagania wstępne, aby go uzyskać.
Po uzyskaniu klucza przekaż go do widżetu wyszukiwania w Grafie wiedzy, używając takiego kodu:
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});
Konfigurowanie widżetu wyszukiwania
JavaScript może wywoływać funkcję KGSearchWidget() z pustym trzecim argumentem, jak pokazano powyżej. Za pomocą tego trzeciego argumentu możesz też przekazać obiekt konfiguracji, określając różne filtry, ograniczenia i moduły obsługi zdarzeń.
Przekazywanie obiektu konfiguracji
Widżet wyszukiwania Grafu wiedzy akceptuje opcjonalny parametr konfiguracji. Dzięki temu możesz wypełnić strukturę danych wieloma opcjami konfiguracji i przekazać je do widżetu, jak pokazano w poniższym przykładzie.
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);
Opcje konfiguracji
W tabeli poniżej opisujemy opcje konfiguracji, które można przekazać do widżetu wyszukiwania Grafu wiedzy.
| Nazwa | Typ | Domyślne | Opis |
|---|---|---|---|
| języki | Tablica(ciąg) | angielski |
Lista kodów języków (zdefiniowanych w standardzie ISO 639-1), które powodują wyszukiwanie we wszystkich określonych językach. Wyniki są uporządkowane w pierwszym języku na liście i wyświetlane w pierwszym języku listy, który zawiera nazwę podmiotu. Angielski ma największy zasięg. Ta wartość jest w przejrzysty sposób przekazywana do interfejsu Search API. Jeśli np. język jest ustawiony na [fr, en] |
| limit | Liczba całkowita | 20 | Maksymalna liczba wyników w menu. |
| typy | Tablica(ciąg) | Dowolne typy | Zwracaj tylko encje, które pasują do dowolnego z podanych typów encji. Jeśli pominiesz ten parametr, zwracane będą dopasowania dowolnego typu encji. |
| maxDescChars | Liczba całkowita | Bez limitu | Maksymalna liczba znaków w szczegółowym opisie każdego elementu. Treść dłuższa niż maxDescChars zostanie obcięta. |
| selectHandler | Funkcja | brak |
Funkcja wywołania zwrotnego do wywołania po wybraniu wiersza. Argumentem funkcji wywołania zwrotnego jest zdarzenie i zawiera atrybut row z informacjami o wybranym wierszu. Przykład użycia tego wywołania zwrotnego znajdziesz w sekcji Używanie modułów obsługi zdarzeń.
|
| highlightHandler | Funkcja | brak |
Funkcja wywołania zwrotnego, która jest wywoływana, gdy użytkownik najedzie kursorem na wiersz.
Argument funkcji wywołania zwrotnego to zdarzenie i zawiera atrybut row z informacjami o wybranym wierszu.
Pamiętaj, że wiele urządzeń (np. urządzeń mobilnych z ekranem dotykowym) nie może wygenerować tego zdarzenia. Przykład użycia tego wywołania zwrotnego znajdziesz w sekcji Używanie modułów obsługi zdarzeń. |
Wdrażanie modułów obsługi zdarzeń
Widżet wyszukiwania Grafu wiedzy uruchamia poniższe zdarzenia w kontekście danych wejściowych, na podstawie których został zainicjowany. W obiekcie konfiguracji możesz podać funkcje wywołania zwrotnego, aby wdrożyć moduły obsługi tych zdarzeń.
selectHandler – to zdarzenie jest wyzwalane, gdy użytkownik wybierze element z listy sugestii. Zdarzeniom towarzyszy obiekt danych, gdzie event.row to dane z wybranego wiersza.
event.row.name i event.row.id reprezentują nazwę i identyfikator wybranego elementu. Poniższy fragment kodu pokazuje, jak można przetestować działanie selectHandler.
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {
"selectHandler": function(e) {
alert("selected " + e.row.name);
}
});
highlightHandler – to zdarzenie jest wywoływane, gdy użytkownik najedzie kursorem na element podświetlony. Ten fragment kodu pokazuje, jak możesz sprawdzić działanie funkcji highlightHandler.
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {
"highlightHandler": function(e) {
alert("highlighted " + e.row.name);
}
});
pomoc i opinie.
Jeśli masz pytania, raporty o błędach lub opinie dotyczące interfejsu Knowledge Graph Search API, odwiedź Forum pomocy.