中文输入法引发的问题

问题描述：在有些情况下，需要实时监听 input 事件进行搜素，但是在进行中文输入时，输入法会进行“合成”，有些时候会引发错误的搜素，非常影响体验。

解决思路：

监听 composition 事件，在输入法开始输入时，禁用 input 事件的监听；

let isComposite = false // 是否正在输入中文
const inputEl = document.querySelector('input')
inputEl.addEventListener('input', (e) => {
  // 合成中，跳过搜素
  if (!isComposite) {
    search(e.target.value)
  }
})
inputEl.addEventListener('compositionstart', (e) => {
  isComposite = true
})
inputEl.addEventListener('compositionend', (e) => {
  isComposite = false
  search(e.target.value)
})

其他方案

1. 通过 change 事件代替 input 事件。
2. 通过 “防抖” 进行包装。