Question

我有一个示例代码

Search:<input type="search" class="form-control" id="search">
<table id="gwAssignForm"><tbody></tbody></table>

我的jquery：

$(document).ready(function() {
   $.ajax({
      type: "POST",
      url: "content.php",
      data: {},
      async : false,
      success: function(result) {
         $('#gwAssignForm tbody').html(result.html);
      },
      error : function(xhr, status){
         console.log(status);
      },
   });
   var $rows = $('#gwAssignForm tbody tr');
   $('#search').keyup(function() {
        var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

        $rows.show().filter(function() {
            var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
            return !~text.indexOf(val);
        }).hide();
   });
});

on content.php

   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>

加载ajax内容后。我开始搜索，但它不起作用。如何解决？

Answer 1

它不起作用，因为您在加载ajax数据之前尝试向$rows添加元素。您只需在$rows函数中声明keyup。

只需更改此内容即可 -

var $rows = $('#gwAssignForm tbody tr');
$('#search').keyup(function() {
  var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

  $rows.show().filter(function() {
    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
    return !~text.indexOf(val);
  }).hide();
});

到此 -

$('#search').keyup(function() {
  var $rows = $('#gwAssignForm tbody tr');
  var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

  $rows.show().filter(function() {
    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
    return !~text.indexOf(val);
  }).hide();
});

Answer 2

由于表数据是动态添加的，$rows将是表中的初始行，因此您需要在动态添加表数据后更新$rows

$(document).ready(function() {
   var $rows = $('#gwAssignForm tbody tr');
   $.ajax({
      type: "POST",
      url: "content.php",
      data: {},
      async : false,
      success: function(result) {
         $('#gwAssignForm tbody').html(result.html);
         $rows = $('#gwAssignForm tbody tr');
         // update '$rows' after table content is added
      },
      error : function(xhr, status){
         console.log(status);
      },
   });
   $('#search').keyup(function() {
        var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();    
        $rows.show().filter(function() {
            var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
            return !~text.indexOf(val);
        }).hide();
   });
});

加载ajax内容后，Jquery搜索过滤器不起作用

2 个答案: