共计 2797 个字符，预计需要花费 7 分钟才能阅读完成。
一、性能介绍
关键词输出提醒接口能够用于获取输出关键字的补完与提醒，帮忙用户疾速输出。能够通过配合前端程序实现 Autocomplete（主动实现）的成果。
二、密钥申请
1. 用户登录
关上腾讯位置服务主页：https://lbs.qq.com，点击右上角的登录按钮：
2. 验证信息
点击控制台，进入开发者信息界面，补全根本用户信息，实现验证。
3. 申请密钥
点击左侧 key 与配额下的 key 治理：
点击创立新密钥，填写 Key 名称、形容、验证码，期待审核通过：
密钥申请通过后，能够点击设置按钮批改名称及形容，并能够抉择启用的产品，以及对调用规定进行限度：
同时，能够在查看配额界面查看各接口的用量状况：
三、操作步骤
1. 开发文档入口
滑动到上方菜单的开发文档 -> 抉择服务端下的 WebService API：
点击左侧的关键词输出提醒：
中转地址：https://lbs.qq.com/service/webService/webServiceGuide/webServiceSuggestion
2. 接口测试
能够间接应用 Postman 工具来测试，或者应用 Postwomen（Postman 他女朋友，唉，连工具都成双入对了，写个代码都要被虐，罢了，好好打工）。
由文档可知，接口的申请类型为GET，默认的数据返回格局为JSON。必填参数有三个：
- key: 开发者密钥
- keyword：搜寻关键字
- region：搜寻范畴，必填的限度条件（能够通过 region_fix 来设置是否扩大范围）
3. 返回后果
以下为返回后果，为了残缺展现数据结构，删减了 data 中的局部数据：
{
"status": 0,
"message": "query ok",
"count": 100,
"data": [
{
"id": "14178584199053362783",
"title": "中关村",
"address": "北京市海淀区",
"category": "地名地址: 热点区域: 商圈类",
"type": 0,
"location": {
"lat": 39.981047,
"lng": 116.320787
},
"adcode": 110108,
"province": "北京市",
"city": "北京市",
"district": "海淀区"
},
{
"id": "2199027905900",
"title": "中关村[地铁站]",
"address": "地铁 4 号线大兴线",
"category": "基础设施: 交通设施: 地铁站",
"type": 2,
"location": {
"lat": 39.984055,
"lng": 116.316478
},
"adcode": 110108,
"province": "北京市",
"city": "北京市",
"district": "海淀区"
}
],
"request_id": "1136352410315519097"
}
字段含意可见下表（可在接口文档中找到）：
四、应用案例
因为接口为纯 HTTP 接口，所以在成果实现上还须要应用我的项目中的一些组件。本例应用最简的 jquery-ui 来实现 autocomplete 成果，下载地址为：http://jqueryui.com/download/。
1. 根底界面
首先构建一个根底界面，创立一个文本框，并按照 jquery-ui 的用法进行绑定。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入 css 款式文件 -->
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"/>
<!-- 引入所需的 jquery 库文件 -->
<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入 jquery-ui 文件 -->
<script src="js/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {$("#search").autocomplete({// 为文本框实现绑定
source: function(request,response){// 应用自定义函数解决}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="search"> 搜寻框: </label>
<input type="text" id="search">
</div>
</body>
</html>
成果如下：
2. 动静响应
在 source 对应的函数中须要实现接管文本框的值，以及向接口申请数据，最终进行数据封装的过程。须要留神，因为该过程波及到用户的一直操作，所以倡议将 ajax 设置为同步形式。
$("#search").autocomplete({// 为文本框实现绑定
source: function(request,response){
// 从 request 对象中取得文本框内容
var keyword = request.term;
// 定义数组，封装最终后果
var obj = [];
$.ajax({
url:"https://apis.map.qq.com/ws/place/v1/suggestion",
type:"get",
dataType:"json",
async:false,// 敞开异步
data:{
"key":"替换为本人的 key",
"keyword":keyword,
"region":"北京"
},success:function(resp){for(i in resp.data){
// 此处能够依据须要自定义要显示的内容以及封装的数据
obj.push({"label":resp.data[i].title + "["+resp.data[i].province+"-"+resp.data[i].city+"-"+resp.data[i].district+"]",
"value":resp.data[i].title
});
//label 为提醒显示的内容
//value 为选中后补全呈现在文本框中的内容
}
}
});
// 将 obj 最为后果返回
response(obj);
}
});测试可知，反对中文与拼音的检索，最终成果如下：
- 拼音搜寻
- 选中后
此处性能须要的成果能够依据我的项目的须要进行调整。
3. 残缺案例源码
- 腾讯位置服务案例
五、视频中转
视频地址：https://www.bilibili.com/video/BV1b54y1p7Ny，喜爱的小伙伴儿肯定要三连加关注哦~
https://www.bilibili.com/vide…
