element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)


Posted in Javascript onJanuary 15, 2019

前段时间,在实现带输入建议并且支持模糊查询输入框的时候,发现了两个值得注意的小地方。整理出来,以供借鉴。

废话不多说,直接来解决问题。

踩坑问题描述:

问题一:

获取到后端返回的数组,并将数组传入作为 results 传入 callback 后,焦点放在 输入框 上的时候,并未出现任何内容,只出现了一个不完整的空白框。

element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题) 

问题解决方案:

这个问题开始我以为是传进 callbackdata 格式不对。Element官网上是这么写的:

element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)

我传入的是对象数组,是没问题的。

后来我仔细阅读了 Elemen t带建议查询输入框的 Demo 代码并查阅相关资料发现,输入建议列表的数据只来源于
data:[] 中的 value 字段!!!

于是,我将后端传回的 response 处理了,将 response 中需要展示的字段组成 {value:'输入建议'} 这种格式,问题解决。

searchAppNodeApi(searchQuery).then((response) => {
     this.loadAll = response.data
     this.devEuiArr = [];
     for (var i = 0; i < this.loadAll.length; i++) {
      this.devEuiArr.push({"value1": this.loadAll[i].dev_eui})
     }
    })

searchAppNodeApi() 是我请求后端的api方法,拿到请求成功的回调函数的 response 参数。但是, response 里面包含很多我不需要的字段,我只需要其中的 dev_eui 字段。因此,循环 response.data 将其中每条的 dev_eui 重组成 {value:'输入建议'} 的格式并 push 进声明的新数组 devEuiArr

打印如下:

element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)

正确效果如下:

element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)

问题二:

成功出现输入建议列表后,出现一个新的问题,并且 Element 官网的 Demo 代码并未阐述这种情况,就是当我获取到输入建议列表后,切换成另一个输入建议列表,会先闪一下上一个出现的输入建议列表,切换后的输入列表为空也会闪出上个输入建议列表,就算手动清空 callback(data:[]) 中的 data 数组也无济于事。

element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)

问题解决方案:

这个问题开始我以为是需要返回数据后手动清空 callback 里面的 data 数组,像下面这样:

//联想查询时触发
   querySearch(queryString, callback) {
    var results = queryString ? this.devEuiArr.filter(this.createFilter(queryString)) : this.devEuiArr
    // 调用 callback 返回建议列表的数据
    callback(results)
    results = ''
   }

但是一点作用没起,也就是跟变量缓存没什么关系,后来我在 Element 官网的一个小角落发现这么一个参数:

element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)

debounce函数去抖 ? 应该就是它了!
(PS:不了解函数去抖和函数节流的同学可以阅读我的下一篇博文。)

debounce 的默认值是 300ms,我们将其设置为 0ms。

<el-autocomplete
     placeholder="请输入DEVEUI"
     v-model="searchDeveuiVal"
     clearable
     :fetch-suggestions="querySearch"
     size="small"
     :debounce=0
     @keyup.enter.native="searchAppNode">
 </el-autocomplete>

正确效果如下:

element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题) 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
慎用 somefunction.prototype 分析
Jun 02 Javascript
js propertychange和oninput事件
Sep 28 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
javascript 常见功能汇总
Jun 11 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
微信小程序实现日历小功能
Nov 18 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 #Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 #Javascript
详解从react转职到vue开发的项目准备
Jan 14 #Javascript
node全局变量__dirname与__filename的区别
Jan 14 #Javascript
微信小程序时间轴实现方法示例
Jan 14 #Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 #Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 #Javascript
You might like
typecho插件编写教程(五):核心代码
2015/05/28 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
JS实现多选框的操作
2020/06/24 Javascript
python实现bucket排序算法实例分析
2015/05/04 Python
Python numpy 常用函数总结
2017/12/07 Python
python使用Matplotlib画条形图
2020/03/25 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
Python colormap库的安装和使用详情
2020/10/06 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
介绍一下write命令
2014/08/10 面试题
翻译专业应届生求职信
2013/11/23 职场文书
二年级小学生评语
2014/04/21 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
安全生产先进个人事迹材料
2014/12/30 职场文书
工程移交协议书
2016/03/24 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
分析Python list操作为什么会错误
2021/11/17 Python