ElementUI实现地址自动补全文本框

We use el-autocomplete component and inputTips API from lbs.amap, which helps realize the Query Autocomplete service. The Query Autocomplete can be used to provide a query prediction for text-based geographic searches, by returning suggested queries as you type. Note that you can only use this service 5,000 times per day. We set inputTipsOpen = false when the service reaches the limit or something wrong happens with API server.

开发环境

node	14.16.1
npm	8.18.0
vue-cli	2.9.6
vue	2.5.2

解决方案

<template><el-autocompletev-model="place":fetch-suggestions="querySearchAsync"placeholder="请输入地址(省/市/地/县)":trigger-on-focus="false":clearable="true"prefix-icon="el-icon-place"></el-autocomplete>
</template><script>
import request from '@/utils/request'
import { errorMsg, infoMsg } from '@/utils/msgsettings.js'
export default {data() {return {place: '',addresses: [],timeout: null,inputTipsOpen: true,}},methods: {querySearchAsync(queryString, cb) {this.addresses.splice(0, this.addresses.length)this.inputTips(queryString)clearTimeout(this.timeout)this.timeout = setTimeout(() => {cb(this.addresses)}, 600)},inputTips(queryString) {// ! frequency limit: 5,000 times per day// https://lbs.amap.com/api/webservice/guide/api/inputtipsrequest.request({url: '/inputtips',baseURL: 'https://restapi.amap.com/v3/assistant/',params: {keywords: queryString,datatype: 'poi',key: 'fdfb60635a50****298be7dc28',},}).then((response) => {var { status, info, tips } = response.dataif (status === '1') {this.addresses = tips.map((value) => {// {value, id, name, district, adcode, location, address}return {value: `${value.district}${value.name}`,...value,}})} else {if (this.inputTipsOpen) {errorMsg(info)this.inputTipsOpen = false}}}).catch(() => {})},},
}
</script>

转载请注明出处：©️ Sylvan Ding 2022