vue+element实现输入框内容远程搜索，并返回至下拉列表

最新推荐文章于 2024-03-21 17:53:38 发布

依古比古和玛卡巴卡

最新推荐文章于 2024-03-21 17:53:38 发布

阅读量788

点赞数

分类专栏： vue+element 文章标签： elementui vue

本文链接：https://blog.csdn.net/weixin_44343167/article/details/118340310

版权

vue+element 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1★--- template 内容

<el-autocomplete 
  placeholder="请输入关键词" 
  popper-class="my-autocomplete" 
  class="input-with-select" 
  v-model="keywords" 
  :fetch-suggestions="querySearchAsync" 
  :trigger-on-focus="false" 
  @select="handleSelect">
</el-autocomplete>

2★--- data 内容

data () {
  return {
    keywords: ''
  }
}

3★--- methods 内容

// 查询
querySearchAsync (queryString, cb) {
  // data 为可选列表数据
  let data = []
  if (queryString.length > 0) {
     // 请求接口
     const params = { queryValue: queryString }
     getList(params).then(res => {
       // console.log(res)
       if (res.status === 200) {
         data = res.data.list.map(i => {
            return {
              value: i.value,
              code: i.code
            }
          })
          cb(data)
        } else {
          cb(data)
        }
     })
   } else {
     cb(data)
   }
},
// 选择下拉
handleSelect (item) {
  console.log(item)
}