2014-04-25 56 views
1

我試圖準備一些功能來過濾和排序從數據庫通過ajax返回的數據,我不能找出一個問題。jQuery事件處理程序的輸入(鍵入文本)

我在許多網站和網絡應用程序中看到了處理文本輸入字段的非常有趣的方式,它以您鍵入內容的方式工作,而您在輸入時卻什麼也沒有發生,但如果您停下來3秒鐘,它就會觸發並進行操作ajax請求,所以我開始嘗試許多inbuild jquery函數,但沒有一個似乎以這種方式工作。

keyup火上每次提供給欄中的了所以沒有去

change從您需要到現場之外單擊火起來是可怕的解決方案

mouseleave與文本輸入字段不工作,當你離開輸入時什麼也沒有發生

mouseout這個工作正常,當我將鼠標移動到場外時,它仍然需要用戶每次調整他的研究以移動鼠標進入和退出,這甚至是最差的然後change方法

inputkeypress,​​的工作方式相同keyup他們只是有美容的差異,但方法保持不變,所以沒有去

所以方法我想實現的是,經過觸發了一段時間的一個你停止打字,並且不需要任何鼠標移動或點擊,但我不知道如何處理它。

HTML

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

的Javascript

$('.adjust').on('change', function() { 
    alert('event has fired'); 
}); 

如果有人願意幫忙,我已經準備了一些初步的jsfiddle進行實驗:

http://jsfiddle.net/eag9e/

+0

'input'將是最好的事件來處理,因爲這也會觸發粘貼(使用鼠標)或影響現場的外部元素。所有你需要做的就是添加一個定時器,每當用戶輸入任何東西時都會被重置。 –

回答

3

嘗試......

var keyupTimeoutID = 0; 

$('.adjust').on('input', function() { 
    clearTimeout(keyupTimeoutID); 
    keyupTimeoutID = setTimeout(function() { 
     alert('event has fired'); 
    }, 1000); 
}); 

jsfiddle example

它創建了一個超時每次值發生變化,清除所有以前的超時。我把它設置爲1秒,但你顯然可以改變它以適應。

+0

這正是我一直在尋找的,完美的,現在我知道他們是怎麼做到的;)謝謝你的幫助 – Mevia

+0

沒問題 - 很高興幫助:) – Archer

相關問題