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 輸入框檢測輸入時執行事件