前言
在開發(fā)諸如地點(diǎn)檢索或行程推薦的系統(tǒng)時驮吱，常常會有用戶對地址信息進(jìn)行輸入檢索的使用場景雕憔，提供關(guān)鍵詞輸入提示功能的話而叼，將有助于用戶快速查找地址身笤，提高搜索的體驗感。利用騰訊地圖提供的接口可以快速的實(shí)現(xiàn)智能化的輸入提示。具體的實(shí)現(xiàn)方法見下文。
一食铐、功能介紹
關(guān)鍵詞輸入提示接口可以用于獲取輸入關(guān)鍵字的補(bǔ)完與提示，幫助用戶快速輸入娇钱。可以通過配合前端程序?qū)崿F(xiàn)Autocomplete（自動完成）的效果绊困。
二忍弛、密鑰申請
1. 用戶登錄
打開騰訊位置服務(wù)主頁：https://lbs.qq.com，點(diǎn)擊右上角的登錄按鈕：
2. 驗證信息
點(diǎn)擊控制臺考抄，進(jìn)入開發(fā)者信息界面，補(bǔ)全基本用戶信息蔗彤，完成驗證川梅。
3. 申請密鑰
點(diǎn)擊左側(cè)key與配額下的key管理：
點(diǎn)擊創(chuàng)建新密鑰疯兼，填寫Key名稱、描述贫途、驗證碼吧彪，等待審核通過：
同時，可以在查看配額界面查看各接口的用量情況：
三怨酝、操作步驟
1. 開發(fā)文檔入口
滑動到上方菜單的開發(fā)文檔 -> 選擇服務(wù)端下的WebService API：
2. 接口測試
可以直接使用Postman工具來測試傀缩，或者使用Postwomen（Postman他女朋友，唉农猬，連工具都成雙入對了赡艰，寫個代碼都要被虐，罷了斤葱，好好打工）慷垮。
由文檔可知，接口的請求類型為GET揍堕，默認(rèn)的數(shù)據(jù)返回格式為JSON料身。必填參數(shù)有三個：
- key:開發(fā)者密鑰
- keyword：搜索關(guān)鍵字
-
region：搜索范圍，必填的限制條件（可以通過region_fix來設(shè)置是否擴(kuò)大范圍）
3. 返回結(jié)果
以下為返回結(jié)果衩茸，為了完整展示數(shù)據(jù)結(jié)構(gòu)芹血，刪減了data中的部分?jǐn)?shù)據(jù)：
{
"status": 0,
"message": "query ok",
"count": 100,
"data": [
{
"id": "14178584199053362783",
"title": "中關(guān)村",
"address": "北京市海淀區(qū)",
"category": "地名地址:熱點(diǎn)區(qū)域:商圈類",
"type": 0,
"location": {
"lat": 39.981047,
"lng": 116.320787
},
"adcode": 110108,
"province": "北京市",
"city": "北京市",
"district": "海淀區(qū)"
},
{
"id": "2199027905900",
"title": "中關(guān)村[地鐵站]",
"address": "地鐵4號線大興線",
"category": "基礎(chǔ)設(shè)施:交通設(shè)施:地鐵站",
"type": 2,
"location": {
"lat": 39.984055,
"lng": 116.316478
},
"adcode": 110108,
"province": "北京市",
"city": "北京市",
"district": "海淀區(qū)"
}
],
"request_id": "1136352410315519097"
}
字段含義可見下表（可在接口文檔中找到）：
由于接口為純HTTP接口递瑰，所以在效果實(shí)現(xiàn)上還需要使用項目中的一些組件祟牲。本例使用最簡的jquery-ui來實(shí)現(xiàn)autocomplete效果，下載地址為：http://jqueryui.com/download/抖部。
1. 基礎(chǔ)界面
首先構(gòu)建一個基礎(chǔ)界面说贝，創(chuàng)建一個文本框，并依照jquery-ui的用法進(jìn)行綁定慎颗。
<!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){
//使用自定義函數(shù)處理
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="search">搜索框: </label>
<input type="text" id="search">
</div>
</body>
</html>
效果如下：
2. 動態(tài)響應(yīng)
在source對應(yīng)的函數(shù)中需要完成接收文本框的值乡恕，以及向接口請求數(shù)據(jù)，最終進(jìn)行數(shù)據(jù)封裝的過程俯萎。需要注意傲宜，由于該過程涉及到用戶的不斷操作，所以建議將ajax設(shè)置為同步方式夫啊。
$("#search").autocomplete({//為文本框完成綁定
source: function(request,response){
//從request對象中獲得文本框內(nèi)容
var keyword = request.term;
//定義數(shù)組函卒，封裝最終結(jié)果
var obj = [];
$.ajax({
url:"https://apis.map.qq.com/ws/place/v1/suggestion",
type:"get",
dataType:"json",
async:false,//關(guān)閉異步
data:{
"key":"替換為自己的key",
"keyword":keyword,
"region":"北京"
},success:function(resp){
for(i in resp.data){
//此處可以根據(jù)需要自定義要顯示的內(nèi)容以及封裝的數(shù)據(jù)
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為提示顯示的內(nèi)容
//value為選中后補(bǔ)全出現(xiàn)在文本框中的內(nèi)容
}
}
});
//將obj最為結(jié)果返回
response(obj);
}
});
測試可知，支持中文與拼音的檢索撇眯，最終效果如下：
-
拼音搜索
-
選中后
此處功能需要的效果可以根據(jù)項目的需要進(jìn)行調(diào)整报嵌。
3. 完整案例源碼
原文作者：一頭小山豬
