Run javascript function when user finishes typing instead of on key up?

I want to trigger an ajax request when the user has finished typing in a text box. I don’t want it to run the function on every time the user types a letter because that would result in A LOT of ajax requests, however I don’t want them to have to hit the enter button either.

Is there a way so I can detect when the user has finished typing and then do the ajax request?

Using jQuery here! Dave

Answer

So, I’m going to guess finish typing means you just stop for a while, say 5 seconds. So with that in mind, lets start a timer when the user releases a key and clear it when they press one. I decided the input in question will be #myInput.

Making a few assumptions…

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example
var $input = $('#myInput');

//on keyup, start the countdown
$input.on('keyup', function () {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$input.on('keydown', function () {
  clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
  //do something
}

Leave a Reply

Your email address will not be published. Required fields are marked *