elementui中el-autocomplete的使用

好想Z☡zᶻ

已于 2024-01-31 17:26:08 修改

阅读量701

点赞数 9

文章标签： elementui 前端 javascript

于 2024-01-31 16:53:07 首次发布

本文链接：https://blog.csdn.net/qq_45750213/article/details/135955635

版权

<el-autocomplete
  @clear="clear"
  class="flex-1"
  clearable
  v-model="title"
  placeholder="请输入地点"
  :fetch-suggestions="querySearchAsync"
  @select="handleSelect">

方法method：

/**
 * 远程搜索地点列表
 * @param queryString
 * @param cb
 */
querySearchAsync (queryString, cb) {
  let arr = []
  if (queryString) {
    this.$jsonp('https://apis.map.qq.com/ws/place/v1/suggestion', {
      output: 'jsonp',
      key: process.env.VUE_APP_TX_KEY,
      location: `${this.center.lat},${this.center.lng}`,
      keyword: encodeURI(queryString)
    }).then(res => {
        arr = res.data || []
        cb(arr);  
    }).catch(() => {
      cb(arr)
    })
  } else {
    cb(arr)
  }
},