其他分享
首页 > 其他分享> > Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)

Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)

作者:互联网

官网的demo献上

在elementui Input输入框中可以找到远程搜索组件,获取服务端的数据

在这里插入图片描述

官网中的数据list都是写在loadAll()中的,而如果我们此时要用到mock的数据就要在此基础上对代码进行修改。

-mock数据的获取-

我们要获取远程mock中所有学生的学号信息,根据输入的数据来远程查找目标,并且在选中该目标后能够自动填充对应的姓名、生日、手机等信息,实现快速获取信息的功能,再也不用手动一个个去输入所有的数据啦~

在template中添加el-autocomplete

1

2

3

4

5

6

7

<el-autocomplete

 placeholder="请输入studentID"

 v-model="form.studentID"

 :fetch-suggestions="querySearchAsync"

 @select="handleSelect"

>

</el-autocomplete>

在script中添加以下函数

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

//queryString 为在框中输入的值

//cb 回调函数,将处理好的数据推回

querySearchAsync(queryString, cb) {

 var studentBasic = this.studentBasic;

 console.log(studentBasic)

 var results = queryString ? studentBasic.filter(this.createStateFilter(queryString)) : studentBasic;

 console.log('results '+results)

 clearTimeout(this.timeout);

 this.timeout = setTimeout(() => {

  cb(results);

 }, 0.5*1000);

 },

//根据输入的字段进行筛选

createStateFilter(queryString) {

 return (state) => {

 return (state.value.toString().toLowerCase().indexOf(queryString.toLowerCase()) === 0);

 };

 },

 

//将其他数据自动补全,采用覆盖的方法

handleSelect(item){

 this.form.name = item.name;

 this.form.studentID = item.value;

 this.form.birth = item.birthday;

 this.form.region = item.city;

 this.form.phone = item.phone;

 }

选中目标学号以后自动补全其他mock的数据

在这里插入图片描述-

-踩坑点之value字段-

看了网上很多demo都说后台获取的数据对象必须有value关键字,因为autocomplete只识别value字段,这里有一个实现的小trick:

1

this.studentBasic= JSON.parse(JSON.stringify(this.list).replace(/studentID/g,"value"));

JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串,如果指定了replacer是一个函数,则可以替换值,或者如果指定了replacer是一个数组,可选的仅包括指定的属性。这样我们就可以把自己的属性都替换成value字段啦~cool

 

原文:https://www.jb51.net/article/172806.htm

标签:el,Vue,form,queryString,results,value,studentBasic,item,下拉框
来源: https://blog.csdn.net/asteriaV/article/details/116274707