web前端关于VUE2.0框架使用Element UI el-autocomplete 整合 BMap 关键字提示输入功能中输入框自动填充下拉框数据的使用和问题总结-优快云博客

本文链接：https://blog.youkuaiyun.com/csdn6107/article/details/125925029

本文介绍了如何在Vue2.0项目中利用ElementUI的el-autocomplete组件和百度地图API，实现输入框自动填充地理地址的功能。通过设置input初始值避免数据丢失，同时展示了相关代码实现搜索建议列表和下拉框数据加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

web前端关于VUE2.0框架使用Element UI el-autocomplete 整合 BMap 关键字提示输入功能中输入框自动填充下拉框数据的使用和问题总结

HTML代码：
<el-form-item label="地理位置" prop="location">
  <el-input 
    v-model="currV.location" 
    placeholder="地理位置" 
  />
  <!-- 此处map_input与百度地图自动填充API关联 -->
  <el-autocomplete
    id="map_input"
    popper-class="my-autocomplete"
    v-model="currV.location"
    :trigger-on-focus="true"
    :fetch-suggestions="querySearch"
    placeholder="请输入设备地址"
    @select="handleSelect">
    <template slot-scope="{ item }">
      <div class="name">{{ item.value }}</div>
      <span class="addr">{{ item.address }}</span>
    </template>
  </el-autocomplete>
</el-form-item>

methods：{
	...,
	querySearch(queryString, cb) {
	  var searchList = this.searchList;
	  var results = (
	    queryString 
	    ? searchList.filter((queryString) => {
	      return (searchList) => {
	        return (searchList.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
	      }
	    }) 
	    : searchList
	  );
	  // 调用 callback 返回建议列表的数据
	  cb(results);
	},
}

以下为下拉框填充数据加载代码：

let ac = new BMap.Autocomplete({ //建立一个自动完成的对象
  input: "map_input",    //对应的id
  keyword: 'value',
  onSearchComplete: (e) => {
    that.searchList = e.Kr.map(item => {
      const { province, city, district, street, business } = item;
      return {
        address: province + city + district + street,
        value: business
      }
    });
  },
});
// *** 划重点 ***
// 一定要加一下代码设置input初始值，否则在执行这个函数后，会将el-autocomplete组件中的输入框值清空
ac.setInputValue(row.location)