Как ограничить результаты поиска по текстовому вводу так, чтобы в раскрывающемся списке фильтров «категория» отображались только результаты - PullRequest
Новая
       8

Как ограничить результаты поиска по текстовому вводу так, чтобы в раскрывающемся списке фильтров «категория» отображались только результаты

1 голос
/ 14 февраля 2020

Я собрал скрипт из этого форума, чтобы помочь мне отфильтровать результаты поиска из довольно сложной таблицы. Я хочу, чтобы пользователи могли 1. Выбрать категорию и 2. выполнить поиск в таблице, используя поле ввода текста.

У меня есть обе эти функции, работающие по отдельности, но мне нужна функция поиска (ввод текста) показывать только результаты, отфильтрованные по выбранному типу категории. В настоящее время функция поиска переопределяет ввод категорий и отображает любые строки таблицы из всех строк таблицы, независимо от категории.

В приведенном ниже коде, например, я хотел бы установить категорию на 'all' и выполнить поиск по Тейлору, возвращая 2 результата. Я также хотел бы иметь возможность выбрать категорию 3 и выполнить поиск по Тейлору и получить только 1 результат.

Кто-нибудь может мне помочь, пожалуйста? Спасибо! 

<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</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</td>
         <td>Taylor</td>
         <td>Doh</td>
         <td>1234 5678</td>
         <td>td@gmail.com</td>
     </tr>
   </tbody>
</table>

Вот мой сценарий: 

(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);
            });
        });
    }




    /***** INPUT CODE TO SEARCH ONLY FIRST COLUMN *****/
    function _onSelectEvent(e) {
          var input, filter, table, tr, td, i, txtValue;
      input = document.getElementById("searchInput");
      filter = input.value.toUpperCase();
      table = document.getElementById("myTable");
      tr = table.getElementsByTagName("tr");
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
          txtValue = td.textContent || td.innerText;
          if (txtValue.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
        }       
      }
    }


    function _filter(row) {

        var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
        row.style.display = text.indexOf(val) === -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);

1 Ответ

2 голосов
/ 14 февраля 2020

попробуйте это: 

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');
}
...