0

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( hasWords )
        {
            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]);
        }
        */
    }
}
Improve this question
2
  • using any javascript library? If so, add its tag. Commented Nov 10, 2010 at 12:02
  • Please paste code also whatever you have done so far. Commented Nov 10, 2010 at 12:05

2 Answers 2

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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.

Improve this answer

2 Comments

i am not using any js library, writing all the code myself and i am trying what you said, but it doesn't work
@user503148: If it doesn't work, then you're doing it wrong. This should work. Edit your question by providing some relevant code. Don't put in all the code, just the relevant parts so it will be easier to understand.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.