元素-ui踩着输入建议的输入框(输入建议空白 最后一个输入建议问题会闪出来)

前段时间我们在实现带有输入建议和支持模糊查询的输入框时，发现了两个值得注意的小点。整理出来供参考。

废话少说，直接解决问题。

踩踏问题描述：

问题1:

获取后端返回的数组并将数组作为结果传入回调后，当焦点在输入框上时，什么也没有出现，只出现一个不完整的空白框。

问题解决方案：

在这个问题的开始，我认为传入回调的数据格式错误。元素官网是这么说的：

我传入了一个对象数组，这没问题。

后来我仔细阅读了带有建议查询输入框的Elementt的Demo代码，查找了相关数据，发现输入到建议列表中的数据只来自data:【】中的值字段！

因此，我对后端返回的响应进行了处理，将要在响应中显示的字段形成{ value:输入建议’的格式}，从而解决了问题。

searchAppNodeApi(搜索查询)。然后((response)={ this . LoadAll=response . data this . Devuiarr=[]；for(var I=0；I this . loadall . length；我){这个。德韦亚尔。推送({'value1' :这个。负荷全部[我]。dev _ eui})}}) searchappnodeapi()是我请求后端获取成功请求的回调函数的响应参数的api方法。但是，响应包含许多我不需要的字段，我只需要dev_eui字段。因此，循环response.data将每一项的dev_eui重新格式化为{ value : ' input improvement ' }的格式，并将其推入声明的新数组devEuiArr。

打印如下：

正确的效果如下：

问题2:

输入建议列表出现成功后，又出现了一个新的问题，Element官网的Demo代码并没有说明这种情况，就是当我拿到输入建议列表时，切换到另一个输入建议列表会先闪前一个输入建议列表，如果切换后的输入列表为空，就会闪前一个输入建议列表，即使回调(data:[])中的数据数组被手动清空，也没有用。

问题解决方案：

在这个问题的开始，我认为有必要在回调中手工清空返回数据后的数据数组，如下所示：

//触发器querysearch (querystring，callback){ var results=query string？this . devuiarr . filter(this . createfilter(query string)): this.deveuiarr//Call回调返回建议列表的数据。callback(results) results=''}但它根本不起作用，也就是说，它与变量缓存无关。后来我在Element官网的一个小角落发现了这样一个参数：

去抖？功能动摇？应该是它！(PS:不了解函数去抖和函数节流的同学可以看我下一篇博文。)

去抖的默认值是300ms，我们将其设置为0ms。

El-autocomplete占位符='请输入deve ui ' v-model=' search deve uival ' clearable : fetch-improvements=' query search ' size=' small ' : de bunce=0 @ keyup . en . Ter。native=' search appnode '/El-autocomplete具有以下正确效果：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。