减少调用次数,不用每输入一次调用一次,输入完后再触发搜索
效果图:
![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()
},