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

       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)