1 /* 处理预输入,例如输入中文汉字时,拼音的预加载不触发输入事件*/
2 var cpLock = false;
3 /* 添加搜索延迟*/
4 var timeoutId = 0;
5
6 /* 重写查询事件,当输入框为空或者查询数据为空时面板回收,否则面板显示查询数据*/
7 $("#search").unbind('input').bind('input', function(e){
if(timeoutId != null) clearTimeout(timeoutId);
timeoutId = setTimeout(function(){
/* 逻辑代码*/
}, 300}/* 此处做一个搜索延迟,避免因输入过快,导致发送过多的废请求*/ 9 })
10
11 /* 处理打拼音时触发input事件bug,eg:https://developer.mozilla.org/zh-CN/docs/Web/Events/compositionstart*/
12 $("#search").bind('compositionstart', function(){
13 cpLock = true;
14 });
15 $("#search").bind('compositionend', function(){
16 cpLock = false;
17 if(timeoutId != null) clearTimeout(timeoutId);
timeoutId = setTimeout(function(){
/* 逻辑代码*/
}, 300}/* 此处做一个搜索延迟,避免因输入过快,导致发送过多的废请求*/
});
注意:由于谷歌与火狐的兼容不同,谷歌浏览器下的事件执行顺序为(compositionstart --> input --> compositionend)
火狐及其他浏览器的事件执行顺序为(compositionstart --> compositionend --> input)
@compositionstart 拼音预输入执行事件;
@compositionend 拼音预输入结束执行事件
@input 输入框检测输入时执行事件