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


Posted in Javascript onOctober 25, 2019

官网的demo献上

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

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

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

-mock数据的获取-

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

在template中添加el-autocomplete

<el-autocomplete 
 placeholder="请输入studentID"
 v-model="form.studentID" 
 :fetch-suggestions="querySearchAsync" 
 @select="handleSelect" 
>
</el-autocomplete>

在script中添加以下函数

//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的数据

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

-踩坑点之value字段-

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

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

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

总结

以上所述是小编给大家介绍的Vue el-autocomplete远程搜索下拉框并实现自动填充功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
JS中Attr的用法详解
Oct 09 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
JS判断用户用的哪个浏览器实例详解
Oct 09 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
JavaScript实现省份城市的三级联动
Feb 11 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 #Javascript
vue实现评论列表功能
Oct 25 #Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 #Javascript
浅谈layui 表单元素的选中问题
Oct 25 #Javascript
layUI的验证码功能及校验实例
Oct 25 #Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 #Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 #Javascript
You might like
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
深入php list()函数的详解
2013/06/05 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
PHP实现的日历功能示例
2018/09/01 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
vue.js的安装方法
2017/05/12 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
python-str,list,set间的转换实例
2018/06/27 Python
详解Python字符串切片
2019/05/20 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
大学生毕业自我鉴定范文
2014/02/03 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
同意转租证明
2015/06/24 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript