[JS]注音輸入法要怎麼做自動完成呢！

如上圖，在輸入中文的時候，通常會需要透過注音之類的輸入法來做拼字。通常 autocomplete 的套件沒有去處理輸入法拼字的問題，畢竟他們打英文不需要多一個注音拼字的動作嘛！

那這個時候要怎麼樣才能做到像 Google 搜尋一樣呢？

其實就是在拼字的時候，就把打在輸入框上面的資料丟出去即可。

Composition Event (組成事件):

透過 Composition Events 我們可以觀察使用者在輸入框內開啟輸入法 (Input Method Editor, IME) 時，組字或選字的狀態。

• compositionstart：輸入框內開啟輸入法，且正在拼字時觸發。
• compositionend：輸入框內開啟輸入法，且正在拼字或選字時更改了內容時觸發。
• compositionupdate：輸入框內開啟輸入法，拼字或選字完成，正要送出至輸入框時觸發。

所以要確認使用者輸入完成並送出文字時，就可以透過 compositionend 來做最後確認。

因為我是用 Vue 來寫，所以會用 Vue 的範例，如下

mounted() {
    let isInputZh = false
    const searchInput = this.$refs.Input.$el.children[0]

    searchInput.addEventListener('compositionstart', function(e) {
      isInputZh = true
    }, false)

    searchInput.addEventListener('compositionupdate', function(e) {
      isInputZh = false
    }, false)

    searchInput.addEventListener('compositionend', function(e) {
      isInputZh = false
    }, false)

    searchInput.addEventListener('input', function(e) {
      if (isInputZh) return
      remoteApiMethod(this.value)
    }, false)
}

用這種方式就可以在輸入法尚未結束的時候丟資料去 API 取資料嘍～