jQuery value change event delay

Question

I want to execute a function like 2 seconds after a user has finished typing in the textbox. If they continue to type after 1 second, the delay time is reset back to 2.

It should function something similar to an autocomplete box.

I know of 2 events: change and keyup. The problem I have with change is that the textbox has to loose focus for it to be triggered. for keyup, what if they use the mouse to paste a text?

Could I be helped here?

Answer 1

There's the HTML5 oninput event, supported by all the current major browsers and can be worked into IE 8 and lower:

$("#myInput").bind("input", function () {     // ... }) 

• http://whattheheadsaid.com/2010/09/effectively-detecting-user-input-in-javascript (explanation)
• http://whattheheadsaid.com/projects/input-special-event (plugin)

---

A very simple cross browser approach would be

$("#myInput").bind("input propertychange", function (evt) {     // If it's the propertychange event, make sure it's the value that changed.     if (window.event && event.type == "propertychange" && event.propertyName != "value")         return;      // Clear any previously set timer before setting a fresh one     window.clearTimeout($(this).data("timeout"));     $(this).data("timeout", setTimeout(function () {         // Do your thing here     }, 2000)); }); 

This would make the event fire twice in IE 9 (one for propertychange, one for input), but it doesn't matter because of the nature of the event handler.