从输入中删除字符时如何编辑此表过滤器脚本以不显示任何行

如何解决从输入中删除字符时如何编辑此表过滤器脚本以不显示任何行

这就是我正在使用的。

希望有人可以帮助我解决这个问题，除了一部分以外，我可以按自己的需要进行工作。

当用户开始使用退格键从输入中删除电话号码时，所有表条目都开始显示，我希望它们被隐藏，就像页面加载时一样。

(function(document) {
    'use strict';

    var LightTableFilter = (function(Arr) {

        var _input;

        function _onInputEvent(e) {
            console.log(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) {
                    
                    if(e.code === "Backspace"){
                        Arr.forEach.call(tbody.rows,_defaultfilter);
                        
                    }else{
                        Arr.forEach.call(tbody.rows,_filter);
                        
                    }
                    
                });
                
            });
        }

        function _defaultfilter(row) {
            console.log(row);
            var text = row.textContent.toLowerCase(),val = _input.value.toLowerCase();
            row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
        }

        function _filter(row) {
            console.log(row);
            var text = row.textContent.toLowerCase(),val = _input.value.toLowerCase();
            console.log(_input.value);
            if(val.length >= 10){
                row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
            }
        }

        return {
            init: function() {
                var inputs = document.getElementsByClassName('light-table-filter');
                Arr.forEach.call(inputs,function(input) {
                    input.addEventListener("keyup",_onInputEvent);
                });
            }
        };
    })(Array.prototype);

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

})(document);

#tableStyle {
  
  border-collapse: collapse;
  width: 100%;
}

#tableStyle td,#tableStyle th {
  border: 1px solid #ddd;
  padding: 8px;
}

#tableStyle tr:nth-child(even){background-color: #f2f2f2;}

#tableStyle tr:hover {background-color: #ddd;}

#tableStyle th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}

.hiderow{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<section class="container">

<h1>Wireless Eligibility Search</h1>
    
<input type="search" id="myInput" class="light-table-filter" data-table="order-table" placeholder="">

<span style="color: gray">ex:6473885095</span>
    
<p>&nbsp;</p>

<table cellpadding="5" cellspacing="5" style="border: 1px solid black" class="order-table table" id="tableStyle">
        <thead>

            <tr>
                <th>Phone Number</th>
                <th>IEMI</th>
                <th>Provider</th>
                <th>Upgrade Date</th>
                <th>Cancellation Fee</th>
            </tr>
        </thead>


<tr style="display:none" class="row">
<td>14555242043</td>
<td>z3.5er8nm7ir0qe9wrEet</td>
<td>Bell</td>
<td>22-Aug-20</td>
<td>0</td>
</tr>
<tr style="display:none" class="row">
<td>13125055491</td>
<td>a3.5tr6nm0to8zc1xvE</td>
<td>Rogers</td>
<td>31-Oct-20</td>
<td>256</td>
</tr>
<tr style="display:none" class="row">
<td>15855992048</td>
<td>s3.5ytah3yp8ad8sf8dgE</td>
<td>Bell</td>
<td>25-Mar-20</td>
<td>0</td>
</tr>
<tr style="display:none" class="row">
<td>14165537459</td>
<td>d3.5uy8sj6jp8eg3rhE</td>
<td>Telus</td>
<td>15-Jan-21</td>
<td>400</td>
</tr>
<tr style="display:none" class="row">
<td>19553550083</td>
<td>f3.5iu6dk4hy3gh4hjE</td>
<td>Telus</td>
<td>17-Jul-21</td>
<td>800</td>
</tr>
<tr style="display:none" class="row">
<td>16473885095</td>
<td>g3.5oi6fl4g;3hq4hwE</td>
<td>Telus</td>
<td>17-Jul-21</td>
<td>800</td>
</tr>
</table>
<p>&nbsp;</p>

</section>