February 21, 2008

Update when user is idle

Filed under: AJAX, Javascript, MooTools, OOP — Tags: , , , , — Zeal_ @ 11:44 pm

Recently I had to update a list based on what the user entered into an input field. I thought it should somehow detect that the user finished typing, but that seemed a rather obscure notion at first glance.

But then it occured to me that it simply means that there has not been any input in, say, 1s or any specified amount of time. Even if the user just stopped for a sec or is disturbed, it is nice to have the list updated for her, and indeed, it does not interfere with what we have in mind when thinking about typing. It doesn’t destroy the feeling of “right now I am telling the computer what I want to”, it bears no interrupting quality whatsoever.

It is so simple:

<input type="text" id="typehere" />
<div id="target"></div>

and then,

new IdleUpdate('typehere', {
    onIdleChange:function(el) {
        new Ajax('stuff.php', {

In this example you can see how the class fits nicely in the MooTools style of design, and how expressive a language javascript can be. :)

Options supported are

  • delay: amount of idle time before the event is fired,
  • onIdleChange: the event handler

Needless to say, anything can be done in the event handler, not just Ajax calls but it is also nice for checking password strengts clientside or computing the total of a bill etc.

Check it out yourself, it’s well under 1K ;) You may want to change the extension. idleupdate.js

Blog at