Filter

Interates through each 'tag_name' element of 'id', for each element, that element is shown if its 'innerHTML' or 'title' attribute contains any of the search terms contained within the pattern.

<input type='text' name='filter' onkeyup='Filter( "some_id", "TR", this.value )'>
function Filter( id, tag_name, pattern )
{
    var element = document.getElementById( id );

    if ( !element )
    {
        alert( "Filter: could not find target element: " + id );
    }
    else
    {
        var terms    = pattern.split( ' ' );
        var elements = element.getElementsByTagName( tag_name );
        var n        = elements.length;

        for ( var i=0; i < n; i++ )
        {
            var e     = elements[i];
            var title = e.getAttribute( "title" );
            var html  = e.innerHTML;

            Toggle.Show( e );

            for ( index in terms )
            {
                var term = terms[index];

                if ( ! Filter.ElementContainsText( e, term ) )
                {
                    Toggle.Hide( e )
                    break;
                }
            }
        }
    }
}

Filter.ElementContainsText
=
function( e, t )
{
    var contains = false;

    if ( e.children && (0 < e.children.length) )
    {
        for ( index in e.children )
        {
            var child = e.children[index];

            if ( (contains = Filter.ElementContainsText( child, t )) )
            {
                break;
            }
        }
    }
    else
    if ( Filter.StringContainsText( e.title, t ) )
    {
        contains = true;
    }
    else
    if ( Filter.StringContainsText( e.innerHTML, t ) )
    {
        contains = true;
    }

    return contains;
}

Filter.StringContainsText
=
function( s, t )
{
    var contains = false;

    if ( s )
    {
        if ( "" == t )
        {
            contains = true;
        }
        else
        {
            var lc_s = s.toLowerCase();
            var lc_t = t.toLowerCase();

            contains = (-1 != lc_s.indexOf( lc_t ));
        }
    }

    return contains;
}

Filter Table Body

Filters each TR of the specified table for all of the values contained in the passed form.

Filter.TableBody
=
function( tbody_id, form )
{
    // 1)   Retrieve values frorm any selects/inputs in forms.

    var values = Filter.TableBody.RequiredValues( form ); // Returns text array.

    //  2)  Iterate through tables rows and show/hide matching/unmatching rows.

    var tbody  = document.getElementById( tbody_id );
    var rows   = tbody.getElementsByTagName( "TR" );
    var n      = rows.length;

    for ( var i=0; i < n; i++ )
    {
        var tr = rows[i];
            tr.style.display = Filter.TableBody.ContainsAll( tr, values ) ? "table-row" : "none";
    }
}

Filter.TableBody.RequiredValues
=
function( form )
{
    var values = new Array();
    var n      = form.elements.length;

    for ( var i = 0; i < n; i++ )
    {
        var input = form.elements[i];

        switch ( input.tagName )
        {
        case "SELECT":
            var option = input.options[input.selectedIndex];
            var text   = option.text.toLowerCase();

            if ( option.value && ("" != text) )
            {
                values.push( text );
            }
            break;

        case "INPUT":
            if ( "" != input.value )
            {
                var bits = input.value.split( " " );
                for ( index in bits )
                {
                    values.push( bits[index].toLowerCase() );
                }
            }
            break;
        }
    }

    return values;
}

Filter.TableBody.ContainsAll
=
function( tr, values )
{
    //  Returns true only if tr contains all values in passed array.

    var contains = true;
    var n        = values.length;

    for ( var i=0; i < n; i++ )
    {
        if (-1 === tr.innerHTML.toLowerCase().indexOf( values[i] ))
        {
            contains = false;
            break;
        }
    }

    return contains;
}