jQuery / Javascript табличный фильтр с выбором и вводом

Question

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

Ниже мой код:

<main role="main" class="container">
  <div class="container-fluid">
    <div class="row">
                    <div class="col-md-6">
                        <label class="table-label mb-3 w-100">
                            <select id="associationSelect" class="styled-select slate float-right mb-4 table-filter search-key select-table-filter" data-table="order-table" data-column="5">
                                <option selected="selected" value="">Search by local board</option>
                                <option value="">All Boards</option>
                                <option>Realtor Association Name</option>
                                <option>Business Association</option>
                                <option>Company Assn</option>
                  <option>Company Association</option>
                            </select>
                        </label>
                    </div><!-- /.col-md-6 -->
                    <div class="col-md-6">
                        <input class="mb-3 w-100 search-key light-table-filter" type="search" id="firstNameInput" placeholder="First name" title="Type in a first name" data-column="0" data-table="order-table">
                    </div><!-- /.col-md-6 -->
                </div><!-- /.col-row -->

                <div class="row">
                    <div class="col-md-6">
                        <input class="mb-3 w-100 search-key light-table-filter"  type="text" id="officeNameInput" placeholder="Office name" title="Type in an office name" data-column="2" data-table="order-table">
                    </div><!-- /.col-md-6 -->
                    <div class="col-md-6">
                        <input class="mb-3 w-100 search-key light-table-filter"  type="text" id="cityTownInput" placeholder="City/Town" title="Type in a city/town name" data-column="3" data-table="order-table">
                    </div><!-- /.col-md-6 -->
                </div><!-- /.col-row -->

                <div class="row">
                    <div class="col-md-6">
                        <input class="mb-3 w-100 search-key light-table-filter"  type="text" id="lastNameInput" placeholder="Last name" title="Type in a last name" data-column="1" data-table="membersTable">
                    </div><!-- /.col-md-6 -->
                </div><!-- /.col-row -->

                <div class="row">
                    <div class="col-12">

                        <table id="membersTable" class="table table-striped table-responsive-sm order-table">
                            <thead>
                                <tr>
                                    <th scope="col">Name</th>
                                    <th scope="col">Business Name</th>
                                    <th scope="col">Address/City</th>
                                    <th scope="col">Phone</th>
                                    <th scope="col">Email</th>
                                    <th class="d-none" scope="col">Association</th>
                                    <th scope="col">Web</th>
                                </tr>
                            </thead>

                            <tbody>


                                <tr class="show-all">
                                    <td class="pr-0 mr-0 d-inline-block" data-input="first-name">Ryan</td>
                                    <td class="pl-0 ml-0 d-inline-block" data-input="last-name">Test</td>
                                    <td data-input="business-name">business name</td>
                                    <td data-input="realtor-address">1232 main, Chicago IL</td>
                                    <td data-input="realtor-phone">555-555-5555</td>
                                    <td data-input="realtor-email">test@htmltest.com</td>
                                    <td class="d-none" data-input="realtor-association">realtor association name</td>
                                    <td data-input="web-link"><a href="http://google.com"><img src="../img/WebLink.png" alt="Web Link URL - Globe Icon" /></a></td>
                                </tr>

                  <tr class="show-all">
                                    <td class="pr-0 mr-0 d-inline-block" data-input="first-name">test</td>
                                    <td class="pl-0 ml-0 d-inline-block" data-input="last-name">testington</td>
                                    <td data-input="business-name">business company</td>
                                    <td data-input="realtor-address">1232 main, Chicago IL</td>
                                    <td data-input="realtor-phone">555-555-5555</td>
                                    <td data-input="realtor-email">test@htmltest.com</td>
                                    <td class="d-none" data-input="realtor-association">business association</td>
                                    <td data-input="web-link"><a href="http://google.com"><img src="../img/WebLink.png" alt="Web Link URL - Globe Icon" /></a></td>
                                </tr>

                  <tr class="show-all">
                                    <td class="pr-0 mr-0 d-inline-block" data-input="first-name">Mister</td>
                                    <td class="pl-0 ml-0 d-inline-block" data-input="last-name">Testington</td>
                                    <td data-input="business-name">company name</td>
                                    <td data-input="realtor-address">1232 main, Chicago IL</td>
                                    <td data-input="realtor-phone">555-555-5555</td>
                                    <td data-input="realtor-email">test@htmltest.com</td>
                                    <td class="d-none" data-input="realtor-association">Company Assn</td>
                                    <td data-input="web-link"><a href="http://google.com"><img src="../img/WebLink.png" alt="Web Link URL - Globe Icon" /></a></td>
                                </tr>

                  <tr class="show-all">
                                    <td class="pr-0 mr-0 d-inline-block" data-input="first-name">Ryan</td>
                                    <td class="pl-0 ml-0 d-inline-block" data-input="last-name">Test</td>
                                    <td data-input="business-name">business name</td>
                                    <td data-input="realtor-address">1232 main, Chicago IL</td>
                                    <td data-input="realtor-phone">555-555-5555</td>
                                    <td data-input="realtor-email">test@htmltest.com</td>
                                    <td class="d-none" data-input="realtor-association">realtor association name</td>
                                    <td data-input="web-link"><a href="http://google.com"><img src="../img/WebLink.png" alt="Web Link URL - Globe Icon" /></a></td>
                                </tr>

                  <tr class="show-all">
                                    <td class="pr-0 mr-0 d-inline-block" data-input="first-name">Ryan</td>
                                    <td class="pl-0 ml-0 d-inline-block" data-input="last-name">Test</td>
                                    <td data-input="business-name">business name</td>
                                    <td data-input="realtor-address">1232 main, Chicago IL</td>
                                    <td data-input="realtor-phone">555-555-5555</td>
                                    <td data-input="realtor-email">test@htmltest.com</td>
                                    <td class="d-none" data-input="realtor-association">realtor association name</td>
                                    <td data-input="web-link"><a href="http://google.com"><img src="../img/WebLink.png" alt="Web Link URL - Globe Icon" /></a></td>
                                </tr>

                            <tr id="noResult" class="">
                                <td> </td>
                                <td> </td>
                                <td colspan="" class="text-center">No Results Found</td>
                                <td> </td>
                                <td> </td>
                                <td> </td>
                                <td> </td>
                                <td> </td>
                            </tr>
                           </tbody>


                        </table>
                    </div>
                </div>

  </div>
</main><!-- /.container -->

Ниже мой JS:

jQuery(document).ready(function(){

$(".search-key").on('change input', function() {

  var emptyFields = $('.search-key').filter(function() {
    return $.trim(this.value) === "";
  });


  if (emptyFields.length == $(".search-key").length) {
    $('table tbody tr').each(function() {
      $(this).show();
    });

    $('#noResult').hide();

  } else {

    var columnNumber = $(this).data('column');


     var enteredValue = $(this).val();


    //var enteredValue = $(this).val();

    $('table tbody tr:visible').each(function() {
      var str = $(this).find('td:eq(' + parseInt(columnNumber) + ')').text();
      var search = str.toLowerCase().indexOf(enteredValue.toLowerCase());

      if (str.toLowerCase().indexOf(enteredValue.toLowerCase()) == -1) {
        $(this).hide();
        $('#noResult').show();
      } else {
        $(this).show();
        $('#noResult').hide();
      }

    });
  }//else
});
});

Как я уже сказал, входные данные работают хорошо, но я не могу понять, как заставить выпадающий список работать с ними.Я попытался передать значение в строку и использовать indexOf для его поиска, но это не сработало.

Любая помощь приветствуется.

Вот созданная мною скрипкадля этого: https://jsfiddle.net/VicePresidentOfAwesome/tcbLqgxp/7/

Кто-нибудь с какой-то концепцией, как я могу заставить это работать?

Answer 1

Проблема в этой строке

$('table tbody tr:visible').each(function() {
   // logics here is correct
});

Вот как это должно работать:

Для всех измененных входов вам нужно пройти через каждую строку таблицыснова (независимо от того, виден он или скрыт из предыдущего поиска)

Попробуйте следующий селектор

// remove `:visible` selector
$('table tbody tr').each(function() {
   // logics here is correct
});