腾讯位置 - 关键词输入提示原创

大家好，本期视频呢，来给大家演示一下腾讯位置当中关键词输入提示的一个接口，那这个接口呢，通常呢，可以和我们前端的一个自动完成的功能呢，结合到一起啊，当我们再去输入一个位置的时候呢，我们希望能够给用户一些提示的数据，那这个提示的数据呢，其实是根据用户已经输入的部分的信息啊，去做一个查询，然后呢得到一个。匹配的数据的列表，然后我们再把得到的这个数据的列表呢，显示在页面当中，那用户呢，可以直接去进行选择，把他想要输入的信息呢，直接进行一个补全，那这个功能呢，对于提升的用户体验呢，是很有帮助的，好，那下面呢，我们来完整的操作一下，好首先呢，我们还是先来到腾讯位置的官网，先去申请一个密钥，那密钥的申请过程呢，是比较简单的，我们在登录之后啊，直接呢去补全一下开发者的信息。

在补全完成之后呢，就可以去申请了，那点击控制台之后呢，在开发者验证的部分去完成相关的验证，Key的管理里面呢，点击创建密钥啊，填写这个密钥的名称和一些描述的备注，然后呢就会出现在。密钥的列表当中啊，我们需要保证的是呢，我们想要使用的功能在这个密钥当中呢，是开启的点击设置呢，在这儿呢，再来检查一下，我们现在要使用的是web service的API啊，我们要保证它是一个勾选的状态，在下方呢，我们还可以呢去做一些限定好，那我们现在呢，来到开发者文档，在web service API当中呢，能够找到关键词输入提示，那我们现在使用的这个接口呢，它只能够返回数据，那至于说我们想要做到这样的一个效果呢，需要我们在前端呢自己来实现一下，首先呢，我们先通过postman工具呢，来测试一下整个接口的使用方法，我们把这个接口的请求地址呢复制一下，在postman当中呢，去新建一个get请求，然后呢粘贴一下URL，把三个必填的参数啊，开发者的密钥，然后呢，搜索的关键字以及。

对应的范围啊，其实就是城市的名称，那有些时候呢，如果我们的结果呢，在当前城市或者是指定的这个城市没有的话呢，也可以通过这个fix参数啊，可以呢，扩大到全国范围来进行匹配，好，那首先呢，我们复制一下密钥。填写在key的部分，那搜索的关键字呢，是我们，呃，用户呢，自己去指定的，比如说中关村呢，我填写北京。点击发送。

好，这样的话呢，就能够得到一个返回的结果，那我们想要的这个核心的数据呢，在data当中，那一般呢，我们是通过这个status呢，先来判断一下啊，我一会儿在演示的时候呢，可能这些就暂时省略了，所以大家在整合到项目里边的时候呢，需要注意一下，那我们看一下它整体的结构，我们要。做的这个提示的信息啊，通常呢，就是包含在title啊，或者是呢address里边啊，看你要把它展示的多么完整，同时呢，也可以呢，取到它的province city district啊，就是它的省市区等等相关的这个信息都可以呢，把它作为一个提示的信息来使用好，那接下来呢，我们在页面当中呢，来做为一个比较完整的案例，那首先呢，我们先去写一个搜索框啊，在这个搜索框当中呢，先去绑定一个事件，那现在呢，我们使用的是GQUI一个比较成型的组件，可以直接通过auto complete这个方法啊为它进行一个绑定，大家可以认为呢，绑定了一个on key up或者是change事件，当我的搜索框当中的内容呢发生变化的时候呢，就会触发这一段代码，那我们需要指定的就是source啊，它的提示的信息的一个来源，那在这个地方呢，可以是固定的。

的一组数啊也可以呢，是一个URL的请求地址，那现在呢，由于我们每次给他的内容呢是发生变化的，所以呢，我们必须要进行一个动态的处理，需要呢去自定义啊来处理整个的一个操作，好首先呢，我们先来复制一下这段代码，那相关的这个JS文件呢，大家可以呢到它的官网呢去进行下载，都是免费的，好那我们现在呢，先来粘贴一下。把文本框呢显示在页面上。

好，那完成之后呢，我们来补全一下这部分内容，那我们在搜索框当中输入内容呢，可以通过request得到，那得到输入内容之后呢，相当于我们就有了一个发送请求时候需要的这个关键字的参数，那请求数据得到之后，我们要对它进行一个封装和整理，把它的结果呢，用response传回去啊，它就可以正常的工作了啊，我们先来看一下整体的流程，首先呢，我们通过term这个属性啊，就能够得到我搜索框当中用户已经输入的内容，然后呢，我们来定义一个数组，作为它的最终的一个结果，在发送阿贾克斯的时候呢，一定要注意，因为呢，我们在整个使用的过程当中呢，用户在进行不断的操作，所以说建议大家呢，把异步关闭啊，使用同步的方式呢来发送请求，那在这个过程当中呢，需要替换一下自己的T，同时。

这个region呢，大家也可以再用一个文本框来把它作为一个动态的参数，然后呢，我们来看一下它的返回结果，好对于这个返回结果呢，我们一般呢，会这样来进行一个处理啊，显示的信息呢是一部分，补全的信息呢是另外一部分，比如说我们显示的时候呢，可以让它尽量的全一点，包括啊title属性里边内容，同时呢，把省市区啊也一并给它显示出来，但是在补全的时候呢，我们不需要这部分内容，所以说我们通过label和value做一个区分，真正补全的内容呢，我们把它放到value里边啊，Label呢是我们显示的这个补全的信息，有了这样的一个结构呢，就比较方便，所以我们每一个元素呢，都是一个Jason对象啊，存放到这个数字里边，最后呢，再通过response直接呢返回好，我们把这部分代码呢复制一下。来看一下。

效果。好，然后呢，我们要把这个key呢替换一下。保存。那在进行搜索的时候呢，它支持拼音啊，也支持中文，比如说我可以搜索四惠东。啊，也是能够找到的，然后把它清空掉，再去搜索。海淀啊，同样的是可以的，那我们看到在这个提示的信息当中呢，指定了哪一个区啊，以及它的一个title的内容，我们在进行补全的时候呢，其实后面这一部分是不需要的，我们在进行补全的时候呢，它真正补全的是我们在value里边设定内容，就是海淀公园的这一部分啊，这样的话呢，我们的用户体验呢会比较好，那我现在做的是一个最简单案例，大家可以在此基础上呢，去做进一步的改写和整合，那我们本期视频呢就到这里，如果大家有任何问题呢，可以在视频下方留言，或者给我发送私信，我们下期再见。