1, Function introduction
The keyword input prompt interface can be used to obtain the completion and prompt of input keywords to help users input quickly. The effect of Autocomplete can be achieved by cooperating with the front-end program.
2, Key application
1. User login
Open Tencent location service homepage: https://lbs.qq.com , click the login button in the upper right corner:
2. Verification information
Click the console to enter the developer information interface, complete the basic user information and complete the verification.
3. Apply for key
Click key management under key and quota on the left:
Click create new Key, fill in Key name, description and verification code, and wait for approval:
After the key application is passed, you can click the set button to modify the name and description, select the enabled products, and restrict the call rules:
At the same time, you can view the usage of each interface in the view quota interface:
3, Operation steps
1. Development document entry
Slide to the development document in the upper menu - > select the WebService API under the server:
Click the keyword input prompt on the left:
Direct address: https://lbs.qq.com/service/webService/webServiceGuide/webServiceSuggestion
2. Interface test
You can directly use Postman tools to test, or use Postwomen (Postman's girlfriend, alas, even the tools are in pairs, and writing code will be abused, just work hard).
According to the document, the request type of the interface is GET, and the default data return format is JSON. There are three required parameters:
- Key: developer key
- Keyword: search keyword
- Region: search scope, mandatory restrictions (you can set whether to expand the scope through region_fix)
3. Return results
The following is the returned result. In order to fully display the data structure, some data in data is deleted:
{
"status": 0,
"message": "query ok",
"count": 100,
"data": [
{
"id": "14178584199053362783",
"title": "Zhongguancun",
"address": "Haidian District, Beijing",
"category": "Place name address:Hot spot area:Business district",
"type": 0,
"location": {
"lat": 39.981047,
"lng": 116.320787
},
"adcode": 110108,
"province": "Beijing",
"city": "Beijing",
"district": "Haidian District"
},
{
"id": "2199027905900",
"title": "Zhongguancun[Metro Station]",
"address": "Metro Line 4 Daxing line",
"category": "infrastructure:Transportation facilities:Metro Station",
"type": 2,
"location": {
"lat": 39.984055,
"lng": 116.316478
},
"adcode": 110108,
"province": "Beijing",
"city": "Beijing",
"district": "Haidian District"
}
],
"request_id": "1136352410315519097"
}
See the following table for the meaning of fields (which can be found in the interface document):
4, Use case
Because the interface is a pure HTTP interface, some components in the project need to be used in the effect implementation. This example uses the simplest jQuery UI to achieve the autocomplete effect. The download address is: http://jqueryui.com/download/.
1. Basic interface
First, build a basic interface, create a text box, and bind it according to the usage of jQuery UI.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--introduce css Style file-->
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"/>
<!--Introduce required jquery Library file-->
<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
<!--introduce jquery-ui file-->
<script src="js/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$("#search").autocomplete({/ / complete binding for text box
source: function(request,response){
//Use custom function processing
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="search">Search box: </label>
<input type="text" id="search">
</div>
</body>
</html>
The effects are as follows:
2. Dynamic response
In the function corresponding to source, you need to complete the process of receiving the value of the text box, requesting data from the interface, and finally encapsulating the data. It should be noted that since this process involves the continuous operation of users, it is recommended to set ajax to synchronous mode.
$("#search").autocomplete({/ / complete binding for text box
source: function(request,response){
//Get the text box content from the request object
var keyword = request.term;
//Define an array to encapsulate the final result
var obj = [];
$.ajax({
url:"https://apis.map.qq.com/ws/place/v1/suggestion",
type:"get",
dataType:"json",
async:false,//Turn off asynchrony
data:{
"key":"Replace with your own key",
"keyword":keyword,
"region":"Beijing"
},success:function(resp){
for(i in resp.data){
//Here you can customize the content to be displayed and encapsulated data as needed
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 is the content displayed for the prompt
//value is the content that appears in the text box after being selected
}
}
});
//Return obj as the result
response(obj);
}
});
The test shows that it supports the retrieval of Chinese and Pinyin, and the final effect is as follows:
- Pinyin search
- When selected
The effect of this function can be adjusted according to the needs of the project.
3. Complete case source code
5, Video direct
Video address: https://www.bilibili.com/video/BV1b54y1p7Ny , the friends you like must pay more attention for three times~
Tencent location - keyword input prompt
Original author: a little mountain pig
Original link: https://sandtower.blog.csdn.net/article/details/113078931