知识图谱搜索微件是一个 JavaScript 模块，可帮助您向网站上的输入框添加主题。用户开始输入文本，该 widget 会使用 Knowledge Graph Search API 在用户输入时查找相关匹配项。
功能
- 跨浏览器 - 它采用经过充分测试的跨浏览器 Closure 编写而成，并编译为纯 JavaScript。
- 跨网域。得益于 JSONP，无需任何代理服务器。
- 托管在 Google 服务器上。
- 免费！（须遵守标准的 Google API 条款）。
为什么要使用知识图谱搜索微件？
- 让用户少输入一些内容就能输入更多数据。
- 让数据录入过程更轻松、更准确。
- 通过提供图片和说明来减轻用户的认知负担。
- 避免为同一实体使用重复的名称：Puff Daddy, P. Doddy、Sean Combs 都提到了
/en/sean_combs。
向您的网站添加知识图谱搜索微件
如需将知识图谱搜索微件添加到某个页面，请在网站源代码中添加以下代码。您需要使用 API 密钥，以便微件可以访问 Google Knowledge Graph 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 密钥允许您的应用发出 Suggest 请求。如果没有 API 密钥，此微件将无法正常运行。如果您还没有 API 密钥，请按照前提条件页面上的说明获取一个。
获取密钥后，请使用如下代码将其传递给知识图谱搜索 widget：
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});
配置搜索微件
您的 JavaScript 可以使用空的第三个参数调用 KGSearchWidget()，如上所示。或者，您可以使用第三个参数传入配置对象，并指定各种过滤条件、限制条件和事件处理脚本。
传递配置对象
知识图谱搜索微件接受可选的配置参数。这样，您就可以使用多个配置选项填充数据结构，并将其传递给 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 的配置选项。
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| languages | 数组(String) | 英语 |
一系列语言代码（在 ISO 639-1 中定义），这些代码会导致以所有指定的语言执行搜索。结果会以所列的第一语言排名，并以列表中含有实体名称的第一语言显示。英语的覆盖率最高。此值会透明地传递给 Search API。 例如，如果语言设置为 [fr, en] |
| 限制 | 整数 | 20 | 下拉菜单中的结果数量上限。 |
| 类型 | 数组(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 的问题、错误报告或反馈，请使用帮助论坛。