标签:补全 resp request 文本框 接口 key 腾讯 data 输入
当用户在地图的搜索框输入地点的关键词时,此时搜索框下拉列表将会有相关词供用户选择,即根据输入文本片段即显示相关的匹配信息,节省了用户的输入成本。
一、功能介绍
关键词输入提示接口可以用于获取输入关键字的补完与提示,帮助用户快速输入。可以通过配合前端程序实现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. 完整案例源码
原文作者:一头小山猪
标签:补全,resp,request,文本框,接口,key,腾讯,data,输入 来源: https://blog.csdn.net/weixin_45653970/article/details/118975161
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。