Need help modifying a bit of CSS/Form based JavaScript

programming web dev
1

So I have this script, it’s a rather nifty script, it allows me to type into a input field and have elements in a table hide and show as is necessary. It works great but it uses tables, which I don’t want. I was wondering if someone could help me dig into this and make it work in an unordered list instead.

Here’s the JavaScript:


function filter (phrase, _id){
    var words = phrase.value.toLowerCase().split(" ");
    var table = document.getElementById(_id);
    var ele;
    for (var r = 0; r < table.rows.length; r++){
        ele = table.rows[r].innerHTML.replace(/<[^>]+>/g,"");
        var displayStyle = 'none';
        for (var i = 0; i < words.length; i++) {
            if (ele.toLowerCase().indexOf(words*)>=0)
            displayStyle = '';
            else {
                displayStyle = 'none';
                break;
            }
        }
    table.rows[r].style.display = displayStyle;
    }
}

Meanwhile the form to make all this work looks like this:


<form id="search-form" action="">
    <p><input id="phrase-filter" onkeyup="filter(this, 'projects', 1)" type="text" size="34" /></p>
</form>

Where I put “projects” is the ID of the table. Right now it simply searches each TD element for corresponding string matches and hides any that don’t match. It works great, but it uses tables which doesn’t suite my purposes.

What I would like is for it to instead search a UL or OL of my choosing and have it hide or show different LI based on the results. The problem is I don’t know enough about JavaScript to do it. Can anyone help or point me in the right direction? I’ve been playing around around with the JS, replacing the references to tables with ULs and such but so far no go.