减少调用次数,不用每输入一次调用一次,输入完后再触发搜索
效果图:
![Alt](https://img-home.csdnimg.cn/images/20220524100510.png
dom结构
<div class="seach"><van-searchshow-actionv-model="addressVal"placeholder="请输入地址搜索"><template #action><div @click="iptchange">搜索</div></template></van-search><inputstyle="display: none;"class="ipt"id="tipinput"placeholder="请输入地址搜索"/>
</div>
事件
autoOptions() {var autoOptions = {input: 'tipinput'}var that = thiswindow.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.addressValvar event = new InputEvent('input')tipinput.dispatchEvent(event)this.autoOptions()
},