知识图谱搜索微件是一个 JavaScript 模块，可帮助您添加 输入框。用户开始输入文本和 widget 使用 Knowledge Graph Search API 在用户输入时查找相关的匹配项。
功能
- 跨浏览器 - 使用经过充分测试的跨浏览器 Closure 编写而成，并编译为纯 JavaScript。
- 跨网域。得益于 JSONP，无需使用代理服务器。
- 托管在 Google 服务器上。
- 免费！（需遵守标准 Google API 条款。）
为什么要使用知识图谱搜索微件？
- 减少用户输入量，多输入一些数据。
- 让数据输入变得更简单、更准确。
- 提供图片和说明，减轻用户的认知负担。
- 避免为同一实体使用重复的名称：Puff Daddy, P。Diddy、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 密钥后，您的应用就可以提出建议请求了。不包含 API 密钥，则微件将无法正常运行。如果您还没有 API 密钥， 请按照 前提条件页面 获得一个。
获取密钥后，使用以下代码将其传递给知识图谱搜索微件 代码，如下所示：
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);
配置选项
下表介绍了您可以传递到 知识图谱搜索微件。
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| 语言 | 数组（字符串） | 英语 |
语言代码列表
（在 ISO 639-1 中定义），从而以所有语言执行搜索
。结果会按所列的第一语言进行排名，
列表中以第一个语言显示
实体。英语的覆盖范围最广。该值是透明的
传递给 Search API。 例如，如果语言设置为 [fr, en] |
| 限制 | 整数 | 20 | 下拉菜单中的结果数上限。 |
| 类型 | 数组（字符串） | 任何类型 | 仅返回与所提供的任意一项匹配的实体 实体 类型。如果省略此参数，则返回任何实体类型的匹配项。 |
| maxDescChars | 整数 | 无限制 | 每个实体的详细说明中的字符数上限。 长度超过 maxDescChars 的内容将被截断。 |
| selectHandler | 函数 | null |
选择行时要调用的回调函数。参数的
回调函数是一个事件，并且包含 row 属性
包含有关所选行的信息。请参阅
使用事件处理脚本
获取使用此回调的示例。
|
| highlightHandler | 函数 | null |
用户将鼠标悬停在行上时调用的回调函数。
该回调函数的参数是一个事件，并且包含
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);
}
});
帮助和反馈
如果您对 Knowledge Graph Search API，使用 帮助论坛。