根据多个搜索输入使用 Javascript 过滤 PHP table

Question

我正在尝试实施 Javascript（没有 jquery）过滤。

我从我的数据库中提取了一个 ID、姓名、部门和角色。我使用 PHP 从我的数据库中 select 它们并以 table.

的形式显示在我的页面上

我希望能够根据部门和角色过滤我的 table。例如，我应该能够输入“营销”并获得所有部门作为营销的结果。我应该能够输入“团队领导”并以团队领导的身份获得所有结果。而且，我应该能够输入“市场营销，团队领导”，并获得所有部门作为市场营销和角色作为团队领导的结果。

目前，我只能按一个筛选（即市场营销或团队领导）。如果我将两者都输入到搜索中，我将得不到任何结果。

我尝试创建两个搜索输入字段。但是，如果我在一个字段中输入“营销”，在另一个字段中输入“团队领导”，我的结果是营销或团队领导，而不是营销和团队领导。

这是我的 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;是的！在该代码过程中，您只能获得一个可能的搜索值。如果你在搜索中写下“team lead” searchVal1="团队领导";可以说，并且，在从 html 元素带回的行信息中，有些框只有“团队领导”，但在同一个框或框看起来像“团队领导营销” 和 searchVal1="团队领导营销";
但在任何盒子里都没有做任何事情。

您似乎引用了一个未在其源代码 qArr 中显示的对象，该对象对每一行进行调用以正则表达式测试 table 中的数据框searchVal1 变量匹配的 table 列。它在该代码中需要修改，或者您需要构建一些代码来简单地获取另一个搜索词而不影响列搜索的先前结果（或该信息的行放置）。

根据多个搜索输入使用 Javascript 过滤 PHP table

Filter PHP table using Javascript based on multiple search inputs

html

javascript

php

filtering

datatables