Question

我无法弄清楚过滤器为何不起作用。这是我的输入字段（即过滤器）和表格，两者均用pug编写。

input#myInput.form-control(type='text', placeholder='Search..')

   table.table.table-hover
     thead
       tr
         th(scope='col') E-Mail
         th(scope='col') Rolle
     tbody#myTable
      each user in users
           tr
            td #{user.local.email}
            td #{user.local.role}

这是javascript文档

  $(document).ready(function(){
   $("#myInput").on("keyup", function() {
     var value = $(this).val().toLowerCase();
     $("#myTable tr").filter(function() {
       $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
     });
   });
 });

Answer 1

您正在尝试过滤表行<TR>，并且内容位于<td>内，您需要检查每个<td>的获取值才能找到值

尝试一下：

$(document).ready(function(){
    $("#myInput").on("keyup", function () {
        var rows = $(".myTable").find("tr").hide();
        if (this.value.length) {
            var data = this.value.toLowerCase().split(" ");
            
            $.each(data, function (i, v) {
                rows.filter(":contains('" + v + "')").show();
            });
        } else rows.show();
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="myInput" placeholder="Search here" />
    
<table class="myTable">
    <tr>
        <td>lion</td>
    </tr>
    <tr>
        <td>cat</td>
    </tr>
    <tr>
        <td>dog</td>
    </tr>
    <tr>
        <td>mouse</td>
    </tr>
</table>

Bootstrap / JQuery表过滤器不起作用

1 个答案: