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 ( elem.id==undefined ) elem.id=getUniqueElemID('typewatch');
        if ( _twlastKey==tab ) {
            clearTimeout (_twtimer[elem.id]);
            return;
        }
        if ( ms==undefined ) ms=600;
        clearTimeout (_twtimer[elem.id]);
        _typewatchElem=elem;
        _twtimer[elem.id] = setTimeout(callback, ms, elem);
    };
}();

2. on the input, have a input event that calls typewatch(e.target, 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 li.style.display='block';
        else addClassName(li, 'hidden'); // or li.style.display='none';
    }
}