知識圖譜搜尋小工具

知識圖譜搜尋小工具是一種 JavaScript 模組，可協助您在網站的輸入方塊中新增主題。使用者開始輸入文字後，小工具會透過 Knowledge Graph Search API 尋找相符的文字，在輸入時顯示相關的內容。

搜尋小工具範例

功能與特色

  • 跨瀏覽器 - 這個程式碼採用經過妥善測試且支援跨瀏覽器的 Closure，並編譯為純粹的 JavaScript。
  • 跨網域。JSONP 不需要 Proxy 伺服器。
  • 由 Google 伺服器代管。
  • 免費！(適用標準 Google API 條款)。

馬上試試！

為什麼要使用知識圖譜搜尋小工具？

  • 讓使用者減少輸入後可輸入的資料。
  • 讓輸入資料的過程更簡單準確。
  • 提供圖片與說明，減少使用者的認知量。
  • 避免同一個實體的名稱重複：Puff Daddy、P. Anddy，Sean Comb 都是指 /en/sean_combs。

在網站中加入知識圖譜搜尋小工具

如要在網頁中加入知識圖譜搜尋小工具，請在網站原始碼中加入下列程式碼。您必須使用 API 金鑰，小工具才能存取 Google 知識圖譜 API。

要加進網站的程式碼

在 HTML 文件的 <head> 中加入以下內容：

<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>

然後在文件 <body> 中使用具有相符 ID 的輸入欄位，如下所示：

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

取得及使用 API 金鑰

取得 API 金鑰可讓應用程式提出「建議」要求。如果沒有 API 金鑰，小工具就無法運作。如果您還沒有 API 金鑰，請按照必備條件頁面上的操作說明取得金鑰。

取得金鑰後，請使用以下程式碼，將金鑰傳送至知識圖譜搜尋小工具：

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

設定搜尋小工具

JavaScript 可使用第三個空白引數呼叫 KGSearchWidget()，如上所示。或者，您也可以使用第三個引數傳入設定物件，藉此指定各種篩選、限制和事件處理常式。

傳遞設定物件

知識圖譜搜尋小工具接受選用設定參數。這可讓您使用多個設定選項填入資料結構，並將其傳送至小工具，如以下範例所示。

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);

設定選項

下表說明您可以將哪些設定選項傳遞至知識圖譜搜尋小工具。

名稱 類型 預設 說明
語言 Array(字串) 英文 觸發搜尋作業的語言代碼清單 (以 ISO 639-1 定義)。結果會按第一種語言排序，並以首個具備該實體名稱的語言顯示。英文的報導最多。這個值會公開傳送至 Search API。
例如，如果語言設為 [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.
限制 整數 20 下拉式選單中的結果數量上限。
types Array(字串) 不限類型 只傳回符合任一實體類型的實體。如果省略這個參數，系統會傳回任何實體類型的相符結果。
maxDescChars 整數 無上限 每個實體詳細說明的字元數上限。長度超過 maxDescChars 的內容會遭到截斷。
selectHandler 函式 空值 選取資料列時要呼叫的回呼函式。回呼函式的引數是事件，且包含 row 屬性，其中含有所選資料列的相關資訊。如需這個回呼的使用範例，請參閱「使用事件處理常式」。
highlightHandler 函式 空值 使用者將滑鼠遊標懸停在資料列上時，系統會呼叫的回呼函式。回呼函式的引數是事件，且包含 row 屬性，其中包含所選資料列的相關資訊。
請注意，許多裝置 (例如觸控螢幕行動裝置硬體) 無法產生這個事件。
如需使用這個回呼的範例，請參閱「使用事件處理常式」。

實作事件處理常式

知識圖譜搜尋小工具會在初始化的輸入環境內觸發下列事件。您可以在設定物件中提供回呼函式，以實作這些事件的處理常式。

selectHandler：使用者從「建議」清單中選取項目時，會觸發這個事件。事件會與資料物件一併顯示，其中 event.row 是所選資料列的資料。event.row.name 和 event.row.id 代表所選項目的名稱和 ID。下列程式碼片段顯示如何測試 selectHandler 的功能。

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

highlightHandler：使用者將滑鼠遊標懸停在項目上時，就會觸發這個事件。下列程式碼片段說明如何測試 highlightHandler 的功能。

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

說明和意見回饋

如果您對知識圖譜 Search API 有任何問題、錯誤報告或意見回饋，請前往說明論壇。