在input输入框输入中文时，需要即时查询出匹配输入内容的结果，一般我们会使用input事件监听用户输入事件，但是在输入汉语拼音时，也会触发input事件，前端就会不断发送请求，用户体验非常差劲。
针对这种情况，笔者给大家介绍一个简单易懂的好方法。
代码如下：
var cpLock = false;
$('#search-input').on('compositionstart', function () {
cpLock = true;
});
$('#search-input').on('compositionend', function () {
cpLock = false;
});
$('#search-input').on('input', function () {
if (!cpLock) {
// TODO
}
});
````
#### 原理：
当浏览器有非直接的文字输入时, compositionstart事件会以同步模式触发.
当浏览器是直接的文字输入时, compositionend会以同步模式触发.
当元素监听到compositionstart事件，给input中事件加锁，禁止input中事件执行，当元素监听到compositionend事件，给input中事件解锁，正常执行。
将以上内容形成插件：
compositionEvent.js
````
var compositionEvent = {
init: function(){
this.compositionEventName = true;
this.bindEvents();
},
bindEvents: function(){
var self = this;
$(document).on('compositionstart', function() {
self.compositionEventName = false;
});
$(document).on('compositionend', function() {
self.compositionEventName = true;
});
}
};
compositionEvent.init();
````