高德地图点击搜索触发输入提示

第一种
减少调用次数，不用每输入一次调用一次，输入完后再触发搜索
此方法为jsAPi，调用次数只有1000次
效果图：

![Alt](https://img-home.csdnimg.cn/images/20220524100510.png
dom结构

<div class="seach">
    <van-search
        show-action
        v-model="addressVal"
        placeholder="请输入地址搜索"
    >
        <template #action>
            <div @click="iptchange">搜索</div>
        </template>
    </van-search>
    <input
        style="display: none;"
        class="ipt"
        id="tipinput"
        placeholder="请输入地址搜索"
    />
</div>

事件

autoOptions() {
    var autoOptions = {
        input: 'tipinput'
    }
    var that = this
    window.AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function () {
        var auto = new window.AMap.AutoComplete(autoOptions)
        auto.on('select', that.selectSite) // 注册监听，当选中某条记录时会触发
    })
    // 搜索框自动完成类
    this.auto = new window.AMap.AutoComplete({
        input: 'tipinput' // 使用联想输入的input的id
    })
    // 构造地点查询类
    this.placeSearch = new window.AMap.PlaceSearch({
        map: this.map
    })
    // 当选中某条搜索记录时触发
    this.auto.on('select', this.selectSite)
},
iptchange() {
	 var tipinput = document.getElementById('tipinput')
	 tipinput.value = this.addressVal
	 var event = new InputEvent('input')
	 tipinput.dispatchEvent(event)
	 this.autoOptions()
},

第二种
这种是web服务api，直接调用接口可实现输入提示，调用次数可达300000

iptchange() {
     var key = '自己申请的key'
     axios({
         methods: 'get',
         url: `https://restapi.amap.com/v3/assistant/inputtips?key=${key}&keywords=${this.addressVal}&city=重庆`
     }).then(res => {
        	console.log(res.data.tips)
     })
 },