vue實現autoComplete元件

需要掌握的技術點
1、採用mock伺服器
2、實現下拉自動匹配，和其他列表的自動匹配
3、在輸入法輸入的時候，頁面的輸入框不監聽輸入法中的內容

研究方法：
1、檢視開原始碼如何實現
2、記錄研究過程中的知識點

知識補充：
1、compositionstart 事件觸發於一段文字的輸入之前（類似於 keydown 事件，但是該事件僅在若干可見字元的輸入之前，而這些可見字元的輸入可能需要一連串的鍵盤操作、語音識別或者點選輸入法的備選詞）。
2、compositionupdate 事件觸發於字元被輸入到一段文字的時候（這些可見字元的輸入可能需要一連串的鍵盤操作、語音識別或者點選輸入法的備選詞）
3、compositionend 當文字段落的組成完成或取消時, compositionend 事件將被激發 (具有特殊字元的激發, 需要一系列鍵和其他輸入, 如語音識別或移動中的字詞建議)。

這裡注意compositionstart這些事件，
如果要在vue子元件上監聽，那麼需要加.native修飾符。
但是要是在原生DOM上監聽，就不需要加.native屬性了。

<input :disabled="disabled" :class="{error: error}"
       :placeholder="placeholder"
       @compositionstart="handleComposition"
       @compositionupdate="handleComposition"
       @compositionend="handleComposition"
       @input="handleChange"
       :value="value" type="text">

通過this.isOnComposition作為開關，控制節流函式。

handleComposition(event) {
     if (event.type === 'compositionend') {
          this.isOnComposition = false;
          this.handleChange(event);
      } else {
          this.isOnComposition = true;
      }
},

接收真實的資料

handleChange(event) {
    let value = event.target.value;
    if(!this.isOnComposition){
        this.getData(value);
    }
},

節流函式。
節流函式開源的有兩種，一種是lodash中的，還有一種是element UI中的節流外掛。在比較了兩者的區別後，個人認為雖然lodash是著名的開源庫，但是它的節流函式真的沒有element UI中的外掛好用。

this.getData = debounce(this.debounce, (value) => {
     this.returnValue(value);
});

列表的自動匹配
使用原生列表的備份，藉助過濾器查詢。

createLayerList(value){
   value = value.trim().toLowerCase();
    let tempArray = [];
    tempArray = this.layerListBackUp.filter(item =>{
        item = item.showName.trim().toLowerCase();
        if(item.indexOf(value)> -1){
            return true;
        }
    });
    this.layerList = JSON.parse(JSON.stringify(tempArray));
}

下一期研究什麼呢？
研究mock服務，以及深入闡釋為什麼lodash的節流函式不好用，以及為何element ui的節流函式好用，