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

减少调用次数，不用每输入一次调用一次，输入完后再触发搜索
效果图：

![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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

事件

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()
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27