Filter PHP table using Javascript based on multiple search inputs

Question

I am trying to implement Javascript (without jquery) filtering.

I pull an id, name, dept, and role from my database. I use PHP to select them from my database and display them on my page in a table.

I want to be able to filter my table based on dept and role. For example, I should be able to input "marketing" and get all results with dept as marketing. I should be able to input "team lead" and get all the results with role as team lead. And, I should be able to input "marketing, team lead" and get all results with dept as marketing AND role as team lead.

Currently, I am only able to filter by one (ie either marketing or team lead). If I input both into my search, I get no results.

I tried creating two search input fields. However, if I type in "marketing" into one field and "team lead" into another, my results are of marketing OR team lead instead of marketing AND team lead.

This is my JS:

<script>
        (function(document) {
            var filter = (function(qArr) {
                var searchVal1;
                function _onInputSearch(e) {
                    searchVal1 = e.target;
                    var dataTable = document.getElementsByClassName(searchVal1.getAttribute('data-table'));
                    qArr.forEach.call(dataTable, function(table) {
                        qArr.forEach.call(table.tBodies, function(tbody) {
                            qArr.forEach.call(tbody.rows, function(row) {
                                var qContent = row.textContent.toLowerCase();
                                var sVal1 = searchVal1.value.toLowerCase();
                                row.style.display = qContent.indexOf(sVal1) > -1 ? '' : 'none';
                            });
                        });
                    });
                }

                return {
                    init: function() {
                        var inputs = document.getElementsByClassName('search');
                        qArr.forEach.call(inputs, function(input) {
                            input.oninput = _onInputSearch;
                        });
                    }
                };
            })(Array.prototype);

            document.addEventListener('readystatechange', function() {
                if (document.readyState === 'complete') {
                    filter.init();
                }
            });

        })(document);
    </script>

Answer 1

var searchVal1; Yup! You got only one search value possible in that code process. If you write "team lead" in the search searchVal1="team lead"; so to say , and , in the row information brought back from the html elements there are boxes that have only "team lead" in them but nothing has BOTH "team lead" and "marketing" in the same box or the box would look something like "team lead marketing" and searchVal1="team lead marketing";
but nothing ever does in any of the boxes.

You seem to have a reference to an object not shown of its source code qArr that does a call on each row to regex test the table data box in the table column where the searchVal1 variable matches against. It's in that code it would need to be modified or you would need to build some code to simply obtain another single search term without disturbing the previous results of the column search(or row placement for that info).