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 相关文章推荐
关于JavaScript的一些看法
May 27 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
jQuery中size()方法用法实例
Dec 27 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
webpack+vue中使用别名路径引用静态图片地址
Nov 20 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 Javascript
vue el-table实现行内编辑功能
Dec 11 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
PHP url 加密解密函数代码
2011/08/26 PHP
解析php中curl_multi的应用
2013/07/17 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
window.open的功能全解析
2006/10/10 Javascript
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
对比分析json及XML
2014/11/28 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
js模拟微博发布消息
2017/02/23 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
python实现统计文本中单词出现的频率详解
2019/05/20 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
const和static readonly区别
2013/05/20 面试题
写给老婆的检讨书
2014/02/21 职场文书
太太口服液广告词
2014/03/20 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
工作检讨书怎么写
2015/01/23 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server
Python find()、rfind()方法及作用
2022/12/24 Python