element UI el-autocomplete 带输入建议的输入框

项目需求:需要用户在输入框中输入公司 全名    但是为了避免用户输入不全   需要做一个带输入建议的输入框


element组件:

<el-autocomplete       

        class="inline-input"          

        v-model="state1"         

        placeholder="请输入内容"     

        :fetch-suggestions="querySearch"       
                // fetch-suggestions 是一个返回输入建议的方法属性

         :trigger-on-focus="false"               
                 //  false = >输入后匹配输入建议  true => 激活即列出输入建议

        @select="handleSelect"               
                  // 点击选中建议项时触发  handleSelect

>   

</el-autocomplete>

在输入框变化时 会触发  querySearch 函数    获取到当前输入的字段  然后调用 createFilter 函数 筛选数据

下图为官方写法  

官方写法将 全部数据 放在 loadAll 函数里   然后通过 createFilter 函数做筛选

而我需要从后台获取数据。

querySearch(queryString, cb) {   

        this.$http({

            url: this.$http.adornUrl("/sys/selct/companyname"),

            method: "post",

            params: this.$http.adornParams({

                    companyName:queryString 

             })

        }).then(({ data }) => {

                for(var i=0;i<data.data.length;i++){

                        data.data[i].value = data.data[i].companyName;   

                }

                cb(data.data);

      });

}

 我需要筛选的数据字段名并不是value,所以现在需要遍历数组把筛选字段换成value

最后将数据 cb() 回去  返回到 autocomplete 组件中 

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 产品大佬嫌select的远程搜索光标不能单个编辑,于是乎提了要把光标变成单个编辑而不是全选这个需求,我先参考同事的...
    小蝴蝶_037a阅读 10,240评论 2 1
  • 关于Mongodb的全面总结 MongoDB的内部构造《MongoDB The Definitive Guide》...
    中v中阅读 32,046评论 2 89
  • 这儿什么都好,什么都美;巧克力细腻,甜品精致,奶酪香醇…但茨威格也好弗罗伊德也好施特劳斯也好,都不能安抚我哭嚎的胃...
    杜英科阅读 280评论 0 0
  • 尊重比自己强的人容易,尊重那些不如自己的人才真正有益需要学习,这期间最佳技术则是发现对方值得学习或者赞同三件事,记...
    王明鹏阅读 464评论 2 7
  • 今夜有磅礴的雨 一遍一遍地把这尘世冲刷 那些肮脏的角落,那些不干净的东西 像马桶上的污垢被清理 今夜,我在一场暴雨...
    朕梁栋阅读 186评论 2 0