element-ui带输⼊建议的input框踩坑（输⼊建议空⽩以及会闪出上⼀次的输⼊建
议问题）
前段时间，在实现带输⼊建议并且⽀持模糊查询输⼊框的时候，发现了两个值得注意的⼩地⽅。整理出来，以供借鉴。
废话不多说，直接来解决问题。
踩坑问题描述：
问题⼀：
获取到后端返回的数组，并将数组传⼊作为 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})
}
})
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.ateFilter(queryString)):this.devEuiArr
// 调⽤ callback 返回建议列表的数据
callback(results)
results =''
}
input框禁止输入但是⼀点作⽤没起，也就是跟变量缓存没什么关系，后来我在 Element 官⽹的⼀个⼩⾓落发现这么⼀个参数：
debounce函数去抖 ? 应该就是它了！
（PS：不了解函数去抖和函数节流的同学可以阅读我的下⼀篇博⽂。）
debounce 的默认值是 300ms，我们将其设置为 0ms。
<el-autocomplete
placeholder="请输⼊DEVEUI"
v-model="searchDeveuiVal"
clearable
:fetch-suggestions="querySearch"
size="small"
:debounce=0
@native="searchAppNode">
</el-autocomplete>
正确效果如下：
Programming is an art form.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。