First, function introduction

Keyword input prompt interface can be used to get input keyword completion and prompt to help users quickly input. You can achieve an Autocomplete with the front-end program.

Two, key application

1. User login

Open the homepage of Tencent Location Services:https://lbs.qq.com, click the login button in the upper right corner:

2. Verify information

Click the console to enter the developer information interface, complete the basic user information and complete the verification.

3. Request a key

Click on the left of Key and Key Management under Quota:

Click to create a new Key, fill in the Key name, description, verification code, and wait for approval:

After the key application is passed, you can click the setting button to modify the name and description, select the enabled product, and limit the invocation rules:

At the same time, you can view the usage of each interface in the view quota interface:

Three, operation steps

1. Develop document entry

Slide to the Development Documents menu at the top -> to select the WebService API under the server side:

Click the key word input prompt on the left:

Direct address:https://lbs.qq.com/service/webService/webServiceGuide/webServiceSuggestion

2. Interface testing

You can test it directly using the Postman tool, or you can use PostWomen. According to the documentation, 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 for keywords
  • Region: required restrictions (region_fix can be used to set whether to expand the region)

3. Return the results

The results are shown below. In order to fully display the data structure, part of the data in the data has been deleted:

{ "status": 0, "message": "query ok", "count": 100, "data": [ { "id": "14178584199053362783", "title": "Zhongguancun", "address", "the Beijing haidian district", "category" : "name address: hot spots: business class", "type" : 0, "location" : {" lat ": 39.981047," LNG ": 116.320787}, "adcode" : 110108, the "province", "Beijing", "city" : "Beijing", "district" : "haidian"}, {" id ": "2199027905900", "title": "Zhongguancun [subway station]", "address":" Subway Line 4 Daxing Line ", "category": "infrastructure: transportation facilities: subway station ", "type": 2, "location": {" LAT ": 39.984055, "LNG ": 116.316478}," ADCODE ": 110108, "PROVINCE ": "Request_id ": "1136352410315519097"} [request_id: "1136352410315519097"}

The meaning of the field can be seen in the following table (which can be found in the interface documentation) :

IV. Use case

Because the interface is pure HTTP, you will need to use some of the components in your project for effect implementation. This example uses the simplest version of jQuery-UI to implement the AutoComplete effect. The download address is:http://jqueryui.com/download/.

1. Basic interface

Begin by building a basic interface, creating a text box, and binding it according to jQuery-UI usage.

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <! Stylesheet "type="text/ CSS" href=" CSS /jquery-ui.min.css"/> <! --> <script SRC ="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script> <! Jquery-UI file --> <script SRC ="js/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script> <script Type ="text/javascript"> $(function() {$("#search"). Function (request,response){// Use a custom function to handle request}}); }); <div class="ui-widget" <div class="ui-widget" <label for="search"> : </label> <input type="text" id="search"> </div> </body> </html>

The effect is as follows:

2. Dynamic response

In the function corresponding to Source, it is necessary to receive the value of the text box, request data from the interface, and finally carry out the process of data encapsulation. Note that since this process involves continuous user action, it is recommended to set Ajax to synchronous mode.

$("#search").autoComplete ({// Complete the binding source for the textbox: Function (request,response){var keyword = request.term; var keyword = request.term; Var obj = []; var obj = []; $.ajax({ url:"https://apis.map.qq.com/ws/place/v1/suggestion", type:"get", dataType:"json", Async :false,// close asynchronous data:{"key":" replace with its own key", "keyword":keyword, "Region ":" Beijing"},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 }); //value is the content that appears in the textbox after being selected}}}); // return response(obj); }});

The test shows that Chinese and pinyin retrieval is supported, and the final effect is as follows:

  • Pinyin search

  • When selected, the desired effect of this function can be adjusted according to the needs of the project.

3. Complete case source code

  • Tencent location service case

5. Direct video access

Video address: https://www.bilibili.com/video/BV1b54y1p7Ny, looked like small partners must be three even oh ~

https://www.bilibili.com/vide…