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 相关文章推荐
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
JavaScript中的函数声明和函数表达式区别浅析
Mar 27 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
详解node-ccap模块生成captcha验证码
Jul 01 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
使用node.JS中的url模块解析URL信息
Feb 06 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
php 多线程上下文中安全写文件实现代码
2009/12/28 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
jquery 新浪网易的评论块制作
2010/07/01 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
python之wxPython菜单使用详解
2014/09/28 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
施工班组长岗位职责
2014/01/05 职场文书
商场活动策划方案
2014/01/24 职场文书
一年级学生期末评语
2014/04/21 职场文书
公司授权委托书
2014/10/17 职场文书
《角的度量》教学反思
2016/02/18 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书