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

带有select和Input的jQuery / Javascript表过滤器

1 个答案: