1、业务场景

在文本框中输入内容，执行查询接口，但遇到一个问题，当用拼音打字写汉字去搜索的时候，会输入一些字母拼成汉字，怎么能监听等拼音文字输入完成后再触发文本框监听事件

2、解决方案

通过查阅资料得知在输入中文（包括语音识别时）会先后触发compositionstart、compositionend事件，类似于keydown和keyup的组合。

触发compositionstart时，文本框会填入 “虚拟文本”（待确认文本），同时触发input事件；在触发compositionend时，就是填入实际内容后（已确认文本）。

先看看 compositionstart 的描述 和 compositionend 的 描述

compositionstart 事件触发于一段文字的输入之前（类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）。

compositionend 当文本段落的组织已经完成或取消时，会触发该事件。

3、具体实现

<div><input type="text" class="input">
</div>

    <script>var inp=document.querySelector('input');let isComposite=false;//控制search()触发function search(){//接口开始查询console.log('搜索');}inp.addEventListener('input',function(){if(!isComposite){settimeout(()=>{search();});}})inp.addEventListener('compositionstart',function (){console.log('start');isComposite=true;})inp.addEventListener('compositionend',function(){console.log('end');isComposite=false;//由于等待拼音字母输入结束后文本框输入事件则不监听了//所以在结束拼写监听中放search()search();})</script>