知识图谱搜索微件

知识图谱搜索 widget 是一个 JavaScript 模块，可帮助您向网站上的输入框添加主题。用户开始输入文字，微件会使用 Knowledge Graph Search API 在用户输入文字的过程中查找相关匹配项。

功能

跨浏览器 - 它采用经过充分测试的跨浏览器 Closure 编写，并编译为纯 JavaScript。
跨网域。借助 JSONP，无需代理服务器。
托管在 Google 服务器上。
免费！（须遵守标准 Google API 条款。）

试试看！

为何要使用知识图谱搜索微件？

让用户少输入文字，多输入数据。
让数据输入更轻松、更准确。
通过提供图片和说明来减轻用户的认知负荷。
避免同一实体的名称重复：Puff Daddy、P. Diddy、Sean Combs 均指 /en/sean_combs。

向网站添加知识图谱搜索微件

如需向网页添加知识图谱搜索 widget，请在网站源代码中添加以下代码。您需要使用 API 密钥，以便该 widget 可以访问 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 密钥，该 widget 将无法正常运行。如果您还没有 API 密钥，请按照前提条件页面上的说明获取一个。

获得密钥后，使用如下代码将其传递给知识图谱搜索微件：

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

配置搜索微件

您的 JavaScript 可以调用 KGSearchWidget()，并使用空第三实参，如上所示。或者，您可以使用此第三个实参传入一个配置对象，指定各种过滤条件、限制和事件处理脚本。

传递配置对象

知识图谱搜索 widget 接受可选的配置参数。这样，您就可以使用多个配置选项填充数据结构，并将其传递给 widget，如以下示例所示。

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

配置选项

下表介绍了您可以传递给知识图谱搜索 widget 的配置选项。

名称	类型	默认值	说明
语言	Array(String)	英语	语言代码（在 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	下拉菜单中的结果数量上限。
类型	Array(String)	任何类型	仅返回与提供的任何实体类型匹配的实体。如果省略此参数，则返回任何实体类型的匹配项。
maxDescChars	整数	无限制	每个实体的详细说明中的字符数上限。如果内容长度超过 maxDescChars，则会被截断。
selectHandler	函数	null	在选择某一行时要调用的回调函数。回调函数的实参是一个事件，其中包含一个 `row` 属性，该属性包含有关所选行的信息。如需查看使用此回调的示例，请参阅使用事件处理脚本。
highlightHandler	函数	null	当用户将鼠标悬停在相应行上时调用的回调函数。回调函数的实参是一个事件，其中包含一个 `row` 属性，该属性包含有关所选行的信息。请注意，许多设备（例如触屏移动硬件）无法生成此事件。如需查看使用此回调的示例，请参阅使用事件处理脚本。

实现事件处理脚本

知识图谱搜索 widget 会在初始化时所用的输入内容上下文中触发以下事件。您可以在配置对象中提供回调函数，以实现这些事件的处理脚本。

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

帮助和反馈

如果您对 Knowledge Graph Search API 有任何疑问、bug 报告或反馈，请使用帮助论坛。