I. Function introduction

The keyword input prompt interface can be used to obtain the completion and prompt of the input keyword to help users enter quickly. The effect of Autocomplete can be achieved by combining with the front-end program.

Key application

1. User login

Open the home page of Tencent Location Service:lbs.qq.com, click the login button in the upper right corner:

2. Verify information

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

3. Apply for a key

Click key on the left and manage key under quota:Click Create new Key, fill in Key name, description and verification code, and wait for approval:After the key application is approved, you can click the Set button to modify the name and description, select the enabled product, and restrict the call rule:In addition, you can view the usage of each interface on the view Quota page:

Three, operation steps

1. Develop document entry

Scroll to the development document at the top menu -> Select WebService API under server:Click the keyword input prompt on the left:Direct address:Lbs.qq.com/service/web…

2. Interface test

You can use the Postman tool directly to test it, or you can use Postwomen. 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: Indicates the search keyword
  • Region: search scope, mandatory restrictions (region_fix can be used to set whether to expand scope)

3. Return the result

The following is the returned result. Some data in data has been deleted to show the data structure completely:

{ "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", "address": "Zhongguancun metro station ", "category":" Infrastructure: Traffic facilities: metro station ", "type": 2, "location": {" LAT ": 39.984055, "LNG ": 116.316478}," ADcode ": 110108, "province": "City ":" Beijing ", "district": }], "request_id": "1136352410315519097"}Copy the code

Parameter Meaning The following table can be found in the interface documentation:Since the interface is a pure HTTP interface, some components in the project need to be used for effect implementation. This example uses the simplest jquery-UI to implement the autoComplete effect.Jqueryui.com/download/.

1. Basic interface

Start 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> <! <link rel="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> <! <script SRC ="js/jquery-ui.min.js" type="text/javascript" charset=" utF-8 "></script> <script Type ="text/javascript"> $(function() {$("#search"). Function (request,response){// use custom functions}}); }); </script> </head> <body> <div class=" uI-widget "> <label for="search"> </label> <input type="text" id="search"> </div> </body> </html>Copy the code

The effect is as follows:

2. Dynamic response

The function corresponding to source needs to complete the process of receiving the value of the text box, requesting data from the interface, and finally carrying out data encapsulation. Note that since this process involves constant user action, it is recommended that Ajax be set to synchronous mode.

$("#search"). Autocomplete ({// Complete the binding for the text box source: Function (request,response){var keyword = request.term; Var obj = []; $.ajax({ url:"https://apis.map.qq.com/ws/place/v1/suggestion", type:"get", dataType:"json", Async :false,// Disable async data:{"key":" replace with your own key", "keyword":keyword, "Region ":" Beijing"},success:function(resp){for(I in resp.data){ "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 in the prompt //value is the content that appears in the text box after selected}}}); // return response(obj); }});Copy the code

The test shows that the support for Chinese and Pinyin search, the final results are as follows:

  • Pinyin search

  • After the selected

The functionality required here can be adjusted to suit the needs of the project.

3. Complete case source code

  • Tencent location service case

Five, video direct

Video address: www.bilibili.com/video/BV1b5… , like the little partner must be three times to add attention oh ~