element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
原文链接：https://blog.csdn.net/wyhstars/article/details/81672195
前段时间，在实现带输入建议并且支持模糊查询输入框的时候，发现了两个值得注意的小地方。整理出来，以供借鉴。
废话不多说，直接来解决问题。
踩坑问题描述：
- 问题一：
获取到后端返回的数组，并将数组传入作为 results 传入 callback 后，焦点放在 输入框 上的时候，并未出现任何内容，只出现了一个不完整的空白框。
- 问题解决方案：
这个问题开始我以为是传进 callback 的 data 格式不对。Element官网上是这么写的：
我传入的是对象数组，是没问题的。
后来我仔细阅读了 Elemen t带建议查询输入框的 Demo 代码并查阅相关资料发现，输入建议列表的数据只来源于
data:[] 中的 value 字段！！！
于是，我将后端传回的 response 处理了，将 response 中需要展示的字段组成 {value:'输入建议'} 这种格式，问题解决。
searchAppNodeApi(searchQuery).then(response => {
this.loadAll = response.data
this.devEuiArr = [];
for (let item of this.loadAll) {
this.devEuiArr.push({"value1": item.dev_eui})
}
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
searchAppNodeApi() 是我请求后端的api方法，拿到请求成功的回调函数的 response 参数。但是， response 里面包含很多我不需要的字段，我只需要其中的 dev_eui 字段。因此，循环 response.data 将其中每条的 dev_eui 重组成 {value:'输入建议'} 的格式并 push 进声明的新数组 devEuiArr。
打印如下：
正确效果如下：
- 问题二：
成功出现输入建议列表后，出现一个新的问题，并且 Element 官网的 Demo 代码并未阐述这种情况，就是当我获取到输入建议列表后，切换成另一个输入建议列表，会先闪一下上一个出现的输入建议列表，切换后的输入列表为空也会闪出上个输入建议列表，就算手动清空 callback（data:[]） 中的 data 数组也无济于事。
- 问题解决方案：
这个问题开始我以为是需要返回数据后手动清空 callback 里面的 data 数组，像下面这样：
//联想查询时触发
querySearch(queryString, callback) {
var results = queryString ? this.devEuiArr.filter(this.createFilter(queryString)) : this.devEuiArr
// 调用 callback 返回建议列表的数据
callback(results)
results = ''
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
但是一点作用没起，也就是跟变量缓存没什么关系，后来我在 Element 官网的一个小角落发现这么一个参数：
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
正确效果如下：