溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前段時間，在實現帶輸入建議并且支持模糊查詢輸入框的時候，發現了兩個值得注意的小地方。整理出來，以供借鑒。
廢話不多說，直接來解決問題。
踩坑問題描述：
問題一：
獲取到后端返回的數組，并將數組傳入作為 results 傳入 callback 后，焦點放在 輸入框 上的時候，并未出現任何內容，只出現了一個不完整的空白框。
問題解決方案：
這個問題開始我以為是傳進 callback 的 data 格式不對。Element官網上是這么寫的：
我傳入的是對象數組，是沒問題的。
后來我仔細閱讀了 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 官網的 Demo 代碼并未闡述這種情況，就是當我獲取到輸入建議列表后，切換成另一個輸入建議列表，會先閃一下上一個出現的輸入建議列表，切換后的輸入列表為空也會閃出上個輸入建議列表，就算手動清空 callback（data:[]） 中的 data 數組也無濟于事。
問題解決方案：
這個問題開始我以為是需要返回數據后手動清空 callback 里面的 data 數組，像下面這樣：
//聯想查詢時觸發
querySearch(queryString, callback) {
var results = queryString ? this.devEuiArr.filter(this.createFilter(queryString)) : this.devEuiArr
// 調用 callback 返回建議列表的數據
callback(results)
results = ''
}
但是一點作用沒起，也就是跟變量緩存沒什么關系，后來我在 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>
正確效果如下：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
