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

拼搏现实的明天。 2023-01-17 13:56 227阅读 0赞

**官网的demo献上**

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

![在这里插入图片描述][5de112befadad4c49ea8daba09311db9.png]

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

**-mock数据的获取-**

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

在template中添加el-autocomplete

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>&lt;el-autocomplete </code> <code>&nbsp;</code><code>placeholder=</code><code>"请输入studentID"</code> <code>&nbsp;</code><code>v-model=</code><code>"form.studentID"</code> <code>&nbsp;</code><code>:fetch-suggestions=</code><code>"querySearchAsync"</code> <code>&nbsp;</code><code>@select=</code><code>"handleSelect"</code> <code>&gt;</code> <code>&lt;/el-autocomplete&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

在script中添加以下函数

<table> 
 <tbody> 
 <tr> 
 <td> 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 </td> 
 <td> <code>//queryString 为在框中输入的值</code> <code>//cb 回调函数，将处理好的数据推回</code> <code>querySearchAsync(queryString, cb) { </code> <code>&nbsp;</code><code>var</code> <code>studentBasic = </code><code>this</code><code>.studentBasic;</code> <code>&nbsp;</code><code>console.log(studentBasic)</code> <code>&nbsp;</code><code>var</code> <code>results = queryString ? studentBasic.filter(</code><code>this</code><code>.createStateFilter(queryString)) : studentBasic;</code> <code>&nbsp;</code><code>console.log(</code><code>'results '</code><code>+results)</code> <code>&nbsp;</code><code>clearTimeout(</code><code>this</code><code>.timeout);</code> <code>&nbsp;</code><code>this</code><code>.timeout = setTimeout(() =&gt; { </code> <code>&nbsp;&nbsp;</code><code>cb(results);</code> <code>&nbsp;</code><code>}, 0.5*1000);</code> <code>&nbsp;</code><code>},</code> <code>//根据输入的字段进行筛选</code> <code>createStateFilter(queryString) { </code> <code>&nbsp;</code><code>return</code> <code>(state) =&gt; { </code> <code>&nbsp;</code><code>return</code> <code>(state.value.toString().toLowerCase().indexOf(queryString.toLowerCase()) === 0);</code> <code>&nbsp;</code><code>};</code> <code>&nbsp;</code><code>},</code> &nbsp; <code>//将其他数据自动补全，采用覆盖的方法</code> <code>handleSelect(item){ </code> <code>&nbsp;</code><code>this</code><code>.form.name = item.name;</code> <code>&nbsp;</code><code>this</code><code>.form.studentID = item.value;</code> <code>&nbsp;</code><code>this</code><code>.form.birth = item.birthday;</code> <code>&nbsp;</code><code>this</code><code>.form.region = item.city;</code> <code>&nbsp;</code><code>this</code><code>.form.phone = item.phone;</code> <code>&nbsp;</code><code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

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

![在这里插入图片描述][9607b460370968d847a5446f8f31f7d0.png]\-

**-踩坑点之value字段-**

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

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>this</code><code>.studentBasic= JSON.parse(JSON.stringify(</code><code>this</code><code>.list).replace(/studentID/g,</code><code>"value"</code><code>));</code> </td> 
 </tr> 
 </tbody> 
</table>

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

原文：[https://www.jb51.net/article/172806.htm][https_www.jb51.net_article_172806.htm]

[5de112befadad4c49ea8daba09311db9.png]: /images/20221021/ddc0823f6281436aad70714d640b6b09.png
[9607b460370968d847a5446f8f31f7d0.png]: /images/20221021/e4f09b777b204d0d997006a77e603698.png
[https_www.jb51.net_article_172806.htm]: https://www.jb51.net/article/172806.htm