解決 el-autocomplete 不顯示及沒數據時閃一下的問題

 

項目中用到了elementUI中的遠程搜索即 el-autocomplete 組件，估計首次使用的都會遇到一些小問題，只要你能認真看完並且耐心理解，保證能幫到你，效果圖如下：

 

 

 

 

組件代碼：

 <el-autocomplete   :popper-class="`cname${index}`" v-model="itemsData" :fetch-suggestions="querySearch"  :debounce=0  @select="handleSelect" v-for="(Item, Index) in itemsData" :key="Index" @focus="oop('cname'+index)"></el-autocomplete> 

 

js代碼：

  data() {
    return {
      cname: ""
    };
  },

  methods: {
    oop(e) {
      //這里能獲取到點擊的input框的自定義類名，這里我命為cname0，cname1，cname3,...
      this.cname = e;
    },

    querySearch(queryString, cb) {
      //queryString是input的值，cb是回調函數；
      var tem_list = [];
      API.wordSuggest({ word: queryString })
        .then(rs => {
          //這里假設返回的rs是參數為 {word:山西} 的數據,rs= ["山西一零九醫院", "山西萬榮技師學院", "山西萬輝制葯", "山西三化飲料", "山西三奇療養院", "山西三立化工", "山西三通電子", "山西三針腦血管病醫院", "山西三院", "山西下"];
          rs.map((item, index) => {
            var tem_obj = {};
            tem_obj.value = item;
            tem_list.push(tem_obj);
          });
          var restaurants = tem_list; 
　　　　　　// 在樣式里所有的下拉列表都隱藏了，這里判斷如果數據不為空則通過指定的class名顯示下拉列表，
          // 這時候的restaurants就是要elementUI規定的格式：[{value:"山西一零九醫院"}, {value:"山西萬榮技師學院"}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
          var $cname = document.querySelector("." + this.cname);
          restaurants.length > 0 ? ($cname.style.display = "block") : ""; 
          var results = queryString? restaurants.filter(this.createFilter(queryString)): restaurants;
          // 調用 callback 返回建議列表的數據
          cb(results);
        })
        .catch(error => {console.log(error);});
    },
    createFilter(queryString) {
      return state => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    }
  },

<style>

.el-autocomplete-suggestion {

  display: none;

}

</style>

 

下面是問題和解決方案，可以結合代碼理解

問題1：數據不顯示

解決方案：

　　那是因為數據的格式有要求，必須是一個數組對象，並且屬性名為“value”，不管你怎么處理，最后變成我上面restaurants的格式（比如：[{ value : "山西一零九醫院" }]）即可；

問題2：沒有數據時下拉列表會閃一下

解決方案：

1. el-autocomplete有個自帶的屬性 debounce(輸入建議的去抖延時),把它設為0；
2. 寫自定義樣式讓所有下拉列表隱藏：.el-autocomplete-suggestion{display:none;}
3. 在querySearch函數中讓數據不為空的下拉列表顯示（實現方法是通過自定義class名，然后讓指定的class顯示）