Table filtering with multiple values

Question

I have some data stored in a table I would like to filter using Javascript. I type my filter string in an input field and show only rows which match. But now, I would like to do this : for example, if I type value1|value2 in my filter field, I want only rows which match with these 2 strings (value1 AND value2). I've tried many ways to do it but no one does exactly what I want ...

Here is an example of what I use to filter (works with one string) :

function filterFromName(text) {

    // Variables
    var filter, tableData, tr, td, i;
    filter = text.toUpperCase();
    tableData = document.getElementById('data_values');
    tr = tableData.getElementsByTagName('tr');

    // For each table row, hide those who don't match the search text
    for (i = 0; i< tr.length; i++) {
        td = tr[i].getElementsByTagName('td')[1]; // query the Alias column
        if (td) {
            if (td.innerHTML.toUpperCase().indexOf(filter) > -1)
                tr[i].style.display = "";
            else
                tr[i].style.display = "none";
        }        
    }

}

Is there a way to adapt this piece of code to do what I want?

So, you want to parse your input string to create a query that would match your data? And you want to use | as the and (opposed to using + as | is rather an or) — Icepickle
– Icepickle, Commented Nov 7, 2017 at 11:45
I just wanted to use my own code and not a JQuery plugin ;-) — Kementari
– Kementari, Commented Nov 7, 2017 at 12:43

gurvinder372 · Accepted Answer · 2017-11-07 11:54:11Z

1

But now, I would like to do this : for example, if I type "value1|value2" in my filter field, I want only rows which match with these 2 strings (value1 AND value2).

You need to change your logic as (comments inline)

function filterFromName(text) {
    var tableData, tr, td, i;
    var filterParams = text.toUpperCase().split( "|" ); //split by | to get array of search parameters
    tableData = document.getElementById('data_values');
    tr = tableData.getElementsByTagName('tr');
    // For each table row, hide those who don't match the search text
    for (i = 0; i< tr.length; i++) {
        td = tr[i].getElementsByTagName('td')[1]; // query the Alias column
        if (td) {
            var tdValue = td.innerHTML.toUpperCase();
            var isMatched = filterParams.filter( function( val ){ return tdValue.indexOf( val ) > -1 }); //check if any val in filterParam array is matching the tdValue
            if ( isMatched.length ) //check length of filtered resultset
                tr[i].style.display = "";
            else
                tr[i].style.display = "none";
        }        
    }
}

answered Nov 7, 2017 at 11:54

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

2 Comments

Kementari Over a year ago

Thanks that was exactly what I was looking for ;-)

gurvinder372 Over a year ago

@Kementari In that case, kindly accept and upvote the answer that has helped you.

Collectives™ on Stack Overflow

Table filtering with multiple values

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related