elementui input框实现联想搜索功能

1、实现效果

2、实现代码

使用elementui input组件

autocomplete 是一个可带输入建议的输入框组件，fetch-suggestions 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。

HTML部分代码

<el-autocomplete
    v-model="formInline.companyname"
    :fetch-suggestions="querySearch"
    @select="handlename"
    placeholder="请输入企业名称"
    :trigger-on-focus="false"
    size="mini"
    class="el-auto"
 >
</el-autocomplete>

js部分代码

methods: {
    querySearch(queryString, callback) {
        // console.log(queryString);
        var list = [{}]
        if(queryString&&queryString.length>0){
            //调取后台接口数据
          getsearches().then(res=>{
            if(res.message=='ok'){
              list = res.data.map(item=>{
                //返回自己想要的数据格式
                return {
                  id:`${item.id}`,
                  value:`${item.name}`
                }
              })
                //对比过滤出包含的数据
              var list2 = queryString ? list.filter(this.createFilter(queryString)) : list;
              callback(list2)
            }
          })
        }
      },
      createFilter(queryString) {
        //判断是否包含
        return (restaurant) => {
          return (restaurant.value.indexOf(queryString) >-1);
        };
      },
      handlename(item){
        // console.log(item);
        this.formInline.companyname = item.value
        this.companyname = item.value
      },
}