Поиск проблем с кнопкой очистки ввода в таблице фильтров javascript / html

Question

Я создаю сложный фильтр таблицы данных. Все работает отлично, кроме «чистой» способности моего поискового фильтра (ввод текста). Из того, что я могу установить sh, возникают проблемы только при выборе категории. Когда я нажимаю кнопку очистки x в моем текстовом вводе, полная таблица, отфильтрованная по соответствующей категории, не возвращается. В большинстве случаев ничего не возвращается, иногда только несколько строк. Я подозреваю, что по возвращенным строкам в чистом виде возвращаются только строки с явной категорией. Например, в категории «3» возвращаются только строки с «3», не строки, которые просто содержат «3», но также и другие номера категорий. Используя приведенный ниже пример сценария и таблицу, я могу продемонстрировать примеры этой проблемы:

• Если я выберу категорию «3», найдите что-то и нажмите «x», чтобы очистить, а не все три из «3». Строки категории появляются снова.
• В категории «3», если я начну печатать «tay», а затем использую клавишу «пробел» - только две из трех строк появятся снова.
• Если я выберу категорию «2», введите букву «d», которой нет в поиске, а затем нажмите «x» и верните 0 результатов вместо одной строки «2». как и следовало ожидать.
• Но, если я сделаю то же самое с выбранной категорией «1» (наберите «d» и очистите, то есть), то на самом деле вернется одна строка.

При нажатии clear Я хотел бы вернуть полную таблицу, отфильтрованную по выбранной категории. Я хотел бы то же самое при использовании backspace, отфильтровывать по keyup так же, как он фильтрует по keyup.

Я как полная потеря ... может кто-нибудь помочь мне? Спасибо всем большое!

<div class="container">

    <h2>Finder</h2>


     <div class="step1">
        <p>Show category:</p>
     </div>

     <select type="search" class="select-table-filter" data-table="order-table" id="searchInput">
        <option value="">All</option>  
        <option value="1">1</option>  
        <option value="2">2</option>  
        <option value="3">3</option>  

     </select>

<input type="search" class="light-table-filter" data-table="order-table" placeholder="Search ..." />
<table class="order-table" id="myTable">
   <thead>
      <tr class="header">
        <th>Category</th>
        <th>Name</th>
        <th>Last Name</th>
        <th>Phone</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
     <tr>
         <td>1</td>
         <td>Taylor</td>
         <td>Swift</td>
         <td>1234 5678</td>
         <td>taytay@gmail.com</td>
     </tr>
     <tr>
         <td>2, 3</td>
         <td>John</td>
         <td>Smith</td>
         <td>1234 5678</td>
         <td>johnnyboy@gmail.com</td>
     </tr>
    <tr>
         <td>3</td>
         <td>Jane</td>
         <td>Doh</td>
         <td>1234 5678</td>
         <td>dohnut@gmail.com</td>
     </tr>
    <tr>
         <td>3, 4</td>
         <td>Taylor</td>
         <td>Doh</td>
         <td>1234 5678</td>
         <td>td@gmail.com</td>
     </tr>
   </tbody>
</table>

</div>

и сценарий ...

 (function(document) {
'use strict';

var LightTableFilter = (function(Arr) {

var _input;
var _select;

    /***** FUNCTION FOR SEARCH 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 _onSelectEvent(e) {
        _select = e.target;
        var tables = document.getElementsByClassName(_select.getAttribute('data-table'));
        Arr.forEach.call(tables, function(table) {
            Arr.forEach.call(table.tBodies, function(tbody) {
                Arr.forEach.call(tbody.rows, _filterSelect);
            });
        });
    }


    /* filters search based on category input - replaces the above commented code */

        function _filter(row) {
        var input = document.getElementById("searchInput");
        var category = row.getElementsByTagName('td')[0].textContent;
        var filter = input.value.toUpperCase();
        var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
        row.style.display = text.indexOf(val) === -1 ? 'none' : ((filter === '' || category === filter) && 'table-row');
    }

    /* Relevant only if FUNCTION FOR SELECT INPUT BOX code is uncommented (referenced in that code for searching all columns)*/

    function _filterSelect(row) {

        var text_select = row.getElementsByTagName('td')[0].textContent.toLowerCase(), val_select = _select.options[_select.selectedIndex].value.toLowerCase();
        row.style.display = text_select.indexOf(val_select) === -1 ? 'none' : 'table-row';

    }

    return {
        init: function() {
            var inputs = document.getElementsByClassName('light-table-filter');
            var selects = document.getElementsByClassName('select-table-filter');
            Arr.forEach.call(inputs, function(input) {
                input.oninput = _onInputEvent;
            });
            Arr.forEach.call(selects, function(select) {
                 select.onchange  = _onSelectEvent;
                        });
                    }
                };
            })(Array.prototype);

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


        })(document);