每个表列的JavaScript过滤单元格

Question

I have a table with n rows by m columns. My goal is to put multiple filtering boxes so I can filter multiple columns in separated filtering boxes. I have JavaScript like this:

function (document) {
    'use strict';
        var MyTableFilter = (function (Arr) {
            var _input;
            function _onInputEvent(e) {
                _input = e.target;
                var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
                Arr.forEach.call(tables, function (table) {
                    Arr.forEach.call(table.tBodies, function (tbody) {
                        Arr.forEach.call(tbody.rows, _filter);
                    });
                });
            }
            function _filter(row) {    
                var input0Value = document.getElementById('input0').value;
                var input1Value = document.getElementById('input1').value;
                var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
                var tdsArray = row.children;
                var td0Content = tdsArray[0].textContent;
                var td1Content = tdsArray[1].textContent;
                function isDisplayRow() {
                    return td0Content.indexOf(input0Value) !== -1 &&
                            td1Content.indexOf(input1Value) !== -1
                }
                row.style.display = isDisplayRow() ? 'table-row' : 'none';
            }
            return {
                init: function () {
                    var inputs = document.getElementsByClassName('my-table-filter');
                    Arr.forEach.call(inputs, function (input) {
                        input.oninput = _onInputEvent;
                    });
                }
            };
        })(Array.prototype);

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

  })(document);

I have input id / class in form like this:

<input type="search" id="input0" class="my-table-filter" data-table="order-table" placeholder="Firstname"/>
<input type="search" id="input1" class="my-table-filter" data-table="order-table" placeholder="Lastname"/>

However, when I run the program, the result is not what I expected. So for example, I have John Smith, Henry Wills in the table. If I type 'H'; in first name search box and 'S' in last name search box, I should only get 'JOHN SMITH'. However, I am getting 'HENRY WILLS' as well because 'HENRY' has 'N' and 'WILLS' has 'S'. If I type out the whole words of 'JOHN SMITH', it works OK.

Also, how do I turn off case sensitive for the input text? I am very new to JavaScript. Any suggestion would be appreciated!

Answer 1

The issue comes from your filter function, which does a substring search. You can modify it to a prefix search easily:

function isDisplayRow() {
    return td0Content.indexOf(input0Value) === 0 &&
        td1Content.indexOf(input1Value) === 0
}

Answer 2

如果只想从String的开头进行搜索，则可以将indexOf更改为String.prototype.startsWith或td0Content.substring（0，input0Value.length）=== input0Value