First written: Jun-2023
last changed Dec-2023

Type-Watching input elements using the custom typewatch function

A typewatch is something that will wait for typing to finish before calling on a desired function; this type-watch takes three parameters - the target "watched" element, the callback to be called once the typing has stopped, and the delay required for typing to stop before calling the callback.

To implement a type-watcher against input fields you need to run through a few steps

  1. declare typewatch function

    js :: typewatch declaration
    var _twtimer = {};
    var _twlastKey='';
    var _typewatchElem;
    window.addEventListener('keypress', function(e) { _twlastKey=e.which; });
    window.addEventListener('keydown', function(e) { _twlastKey=e.which; });
    var typewatch = function(){
        return function(elem, callback, ms){
            var tab=9;
            if ( )'typewatch');
            if ( _twlastKey==tab ) {
                clearTimeout (_twtimer[]);
            if ( ms==undefined ) ms=600;
            clearTimeout (_twtimer[]);
            _twtimer[] = setTimeout(callback, ms, elem);

  1. on the input, have a input event that calls typewatch(, function(elem) {doSomething(elem.value);}, 600);";

    info Tip: You probably want to have this functionality on an input of type search <input type='search'> in order to include the clear button (X) at the right side of the input.

js :: Example filter field
<input type='search' oninput='typewatch(this, function(elem) {doFilter(elem);}, 600);' class='filter'>

function doFilter(elem) {
    console.log('looking for '+elem.value);
    let filterVal = elem.value.toLowerCase().trim();
    let elems=document.getElementById('my-container').getElementsByTagName('LI'); // ... or whatever is necessary

    for(let i=0; i<elems.length; i++) {
        let li=elems[i];
        if ( li.innerText.toLowerCase().indexOf(filterVal)>-1 || filterVal=='' ) removeClassName(li, 'hidden'); // or'block';
        else addClassName(li, 'hidden'); // or'none';

link Click to view a demo