Selecting rows from a HTML table with only specified value?

There is a table and a text input box on the HTML page. Whenever the user types a value in the box, the Javascript should filter the table and show only the rows which has the value in the data.

I have done with this part but the main problem is if the user types space in the box and then types another value then the js should filter the data where all of the words (text separated with space) are present at least once in any cell of the row, just like Google Suggestions but with table.

Does anyone have a solution?

HERES THE CODE

for(var i=0; i < trs.length; i++ ) 
{       
    tds = trs[i].getElementsByTagName("td");
    //alert(tds );

    for( var j=0; j < tds.length; j++ )
    {
        if( hasW开发者_开发技巧ords )
        {
            for( k = 0; k < searchWords.length; k++ )
            {
                if( searchWords[k].toLowerCase() != "" && tds[j].innerHTML.toLowerCase().search( searchWords[k].toLowerCase() ) == -1 )
                {
                    found = false;
                    //foundRows.push(trs[i]);
                }
                else {
                    found = true;
                    foundRows.push(trs[i]);
                }
            }
        }
        else
        {
            if( searchText != "" && tds[j].innerHTML.toLowerCase().search( searchText.toLowerCase() ) != -1 )
            {
                found = true;
                foundRows.push(trs[i]);
            }
        }           

        /*
        if( tds[j].innerHTML.toLowerCase().search( searchText ) != -1 )
        {
            found = true;
            foundRows.push(trs[i]);
        }
        */
    }
}

---

First possibility

Do the same thing as you did with one word. Split user's input into separate words and test for each of them.

Second possibility - optimised filtering

Traversing the whole table seems very time consuming which could quite easily be optimised with a small overhead at the beginning. Since javascript objects are a kind of associative arrays you could do this:

1. When page loads traverse table and parse texts of each cell. Parsing should be done using regular expressions, because it will make it simpler to exclude any punctuation and similar var rx = /([a-z]+)/gi. You can easily explude any single letter words here as well var rx = /([a-z]{2,})/gi.
2. Store each word in associative object with relation to row.
3. Filter using this object.

How should your associative object look like:

var data = {
    "tomorrow": [1, 2, 3],
    "will": [3, 5, 6],
    "be": [78],
    "sunny": [3, 9, 19],
    ...
};

arrays of each word correspond to table row index. So when user enters whatever data in the textbox, you can easily split that into separate words and get all arrays:

var filter = $("#search_filter").val().split(" ");
var firstWordRows = data[filter[0]];

Then all you have to do is intersect those arrays and hide all rows except resulting ones.

The good thing is you can define stop words that you don't filter (like in, a, the, of, at, etc.)...

Why even bother with the second one? If the page is more likely to be filtered several times as opposed to being loaded, then this overhead at page load will make your filtering snappy. Filtering will be very fast and less processor hungry.

Suggestion

I strongly suggest you do use some Javascript library that will make your life much simpler. Use jQuery for instance which doesn't have a long learning curve and works very well along with existing scripts you may have.

---

If you've already got it working for one word, just split the input on spaces (input.split(" ")), and then filter in the same manner, except checking for every word.

If you were using a JS library, though, it'd surely be easier.