Wait for User to Stop Typing, Using JavaScript

Here’s the scenario. You have a search feature on your website that you want to live-update while the user types. The naive solution would be to execute a search query on every keystroke. This falls apart, however, because the user can usually type faster your server can respond. This makes for a poor user experience and an overloaded server.

The solution to this is to execute the search only after the user stops typing. I’m going to show you how to implement this in just a few lines of code.

Listen For User Input

Here is some HTML and JavaScript to log the current value of an input whenever the user presses a key. In the real world, this log could just as easily be a function call to execute a search query.

<!-- a simple input box -->
<input type="text" id="test-input" />
// Get the input box
var textInput = document.getElementById('test-input');

// Listen for keystroke events
textInput.onkeydown = function (e) {
    console.log('Input Value:', textInput.value);
};

Demo 1 – Output on Every Keystroke

Input Value: ""

As you can see, there’s nothing wrong with printing a log on every keystroke. It works just fine. However, if that log message was replaced by a network call to make a search query, it would start making too many requests. This would both slow down the UI and potentially overload the server. So how do we fix this?

Wait for Typing to Stop

In order to execute a chunk of code after the user stops typing we need to know about a few things:

setTimeout(callback, milliseconds) and clearTimeout(timeout)

setTimeout is a JavaScript function that executes a function (callback) after a given amount of time has elapsed (milliseconds). clearTimeout is another function that you can use to cancel a timeout if it hasn’t executed yet.

So how do we use these things to detect when a user stops typing? Here’s some code to show you. Hopefully I’ve added enough comments to make it clear what’s going on.

// Get the input box
var textInput = document.getElementById('test-input');

// Init a timeout variable to be used below
var timeout = null;

// Listen for keystroke events
textInput.onkeyup = function (e) {

    // Clear the timeout if it has already been set.
    // This will prevent the previous task from executing
    // if it has been less than <MILLISECONDS>
    clearTimeout(timeout);

    // Make a new timeout set to go off in 800ms
    timeout = setTimeout(function () {
        console.log('Input Value:', textInput.value);
    }, 500);
};

Demo 2 – Output when Typing Stops

Input Value: ""

As you can see in the demo above, nothing is outputted until no key presses have happened for 500 milliseconds. Exactly what we wanted.

Wrap-Up

That’s it. All it takes to delay execution while typing is 5 lines of code. Feel free to ask questions on Twitter or Google Plus if you have any.

tutorial javascript