前段時間，在實現帶輸入建議並且支援模糊查詢輸入框的時候，發現了兩個值得注意的小地方。整理出來，以供借鑑。

廢話不多說，直接來解決問題。

踩坑問題描述：

• 問題一：

  獲取到後端返回的陣列，並將陣列傳入作為 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>

正確效果如下：