element-ui帶輸入建議的input框踩坑(輸入建議空白以及會(huì)閃出上一次的輸入建議問(wèn)題)

前段時(shí)間，在實(shí)現(xiàn)帶輸入建議并且支持模糊查詢(xún)輸入框的時(shí)候，發(fā)現(xiàn)了兩個(gè)值得注意的小地方。整理出來(lái)，以供借鑒。

廢話不多說(shuō)，直接來(lái)解決問(wèn)題。

踩坑問(wèn)題描述：

問(wèn)題一：

獲取到后端返回的數(shù)組，并將數(shù)組傳入作為 results 傳入 callback 后，焦點(diǎn)放在 輸入框 上的時(shí)候，并未出現(xiàn)任何內(nèi)容，只出現(xiàn)了一個(gè)不完整的空白框。

問(wèn)題解決方案：

這個(gè)問(wèn)題開(kāi)始我以為是傳進(jìn) callback 的 data 格式不對(duì)。Element官網(wǎng)上是這么寫(xiě)的：

我傳入的是對(duì)象數(shù)組，是沒(méi)問(wèn)題的。

后來(lái)我仔細(xì)閱讀了 Elemen t帶建議查詢(xún)輸入框的 Demo 代碼并查閱相關(guān)資料發(fā)現(xiàn)，輸入建議列表的數(shù)據(jù)只來(lái)源于
data:[] 中的 value 字段?。。?/p>

于是，我將后端傳回的 response 處理了，將 response 中需要展示的字段組成 {value:'輸入建議'} 這種格式，問(wèn)題解決。

 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() 是我請(qǐng)求后端的api方法，拿到請(qǐng)求成功的回調(diào)函數(shù)的 response 參數(shù)。但是， response 里面包含很多我不需要的字段，我只需要其中的 dev_eui 字段。因此，循環(huán) response.data 將其中每條的 dev_eui 重組成 {value:'輸入建議'} 的格式并 push 進(jìn)聲明的新數(shù)組 devEuiArr。

打印如下：

正確效果如下：

問(wèn)題二：

成功出現(xiàn)輸入建議列表后，出現(xiàn)一個(gè)新的問(wèn)題，并且 Element 官網(wǎng)的 Demo 代碼并未闡述這種情況，就是當(dāng)我獲取到輸入建議列表后，切換成另一個(gè)輸入建議列表，會(huì)先閃一下上一個(gè)出現(xiàn)的輸入建議列表，切換后的輸入列表為空也會(huì)閃出上個(gè)輸入建議列表，就算手動(dòng)清空 callback（data:[]） 中的 data 數(shù)組也無(wú)濟(jì)于事。

問(wèn)題解決方案：

這個(gè)問(wèn)題開(kāi)始我以為是需要返回?cái)?shù)據(jù)后手動(dòng)清空 callback 里面的 data 數(shù)組，像下面這樣：

//聯(lián)想查詢(xún)時(shí)觸發(fā)
   querySearch(queryString, callback) {
    var results = queryString ? this.devEuiArr.filter(this.createFilter(queryString)) : this.devEuiArr
    // 調(diào)用 callback 返回建議列表的數(shù)據(jù)
    callback(results)
    results = ''
   }

但是一點(diǎn)作用沒(méi)起，也就是跟變量緩存沒(méi)什么關(guān)系，后來(lái)我在 Element 官網(wǎng)的一個(gè)小角落發(fā)現(xiàn)這么一個(gè)參數(shù)：

debounce ？ 函數(shù)去抖 ? 應(yīng)該就是它了！
（PS：不了解函數(shù)去抖和函數(shù)節(jié)流的同學(xué)可以閱讀我的下一篇博文。）

debounce 的默認(rèn)值是 300ms，我們將其設(shè)置為 0ms。

<el-autocomplete
     placeholder="請(qǐng)輸入DEVEUI"
     v-model="searchDeveuiVal"
     clearable
     :fetch-suggestions="querySearch"
     size="small"
     :debounce=0
     @keyup.enter.native="searchAppNode">
 </el-autocomplete>

正確效果如下：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。