表jQuery多值过滤器

我试图用多个关键字过滤表，如果一个tr包含所有关键字，然后显示。我发现了一些在ul上效果很好的东西，但是在桌子上表现得很直。这里的jsfiddle：http://jsfiddle.net/AtkNW/81/表jQuery多值过滤器

该过滤器似乎只检查每个tr的第二个或第三个td。我错过了什么？我可以用一只手。

$("#kwd_search").keyup(function() { 

var filter = $(this).val().toLowerCase(), 
    count = 0; 
var length = $(this).val().length; 
if (length > 1) { 
    var filter_tags = filter.split(" "); 
    $("#dep td").each(function() { 
     var $this = $(this); 
     var matches = true; 
     $.each(filter_tags, function (i, a_filter) { 
      if ($this.text().toLowerCase().indexOf(a_filter) === -1) { 
       matches = false; 
      } 
     }); 
     if (matches) { 
      $this.parent("tr").removeClass("hidden"); 
     } else { 
      $this.parent("tr").addClass("hidden"); 
     } 
    }); 
} else { 
    $("#dep td").parent("tr").removeClass("hidden"); 
} 
});

来源

2013-07-25 Flavien Hamon

工作演示http://jsfiddle.net/cse_tushar/E9bTu/1

你的代码错误是遍历所有td当你改变了比赛值为false。

即，如果最后一个值匹配，只有您的代码运行正常。

我改变我运行代码的代码对每个trÑ比包含在它td并且还通过默认matches=0替换代码时找到匹配matches=1。

所有在td一个tr如果matches=1比遍历i之后删除类hidden

加入filter_tags_length来计算过滤器标记的长度。

遍历所有在一个tdtr套matches=1如果filter_tags_length等于可变c后。

$("#kwd_search").keyup(function() { 

    var filter = $.trim($(this).val().toLowerCase()); 
    count = 0; 
    var length = $.trim($(this).val().length); 
    if (length > 1) { 
     var filter_tags = filter.split(" "); 
     var filter_tags_length = filter_tags.length; 
     $("#dep tr:gt(0)").each(function() { 
      count++; 
      i = 0; 
      matches = 0; 
      c = 0; 
      $(this).find('td').each(function() { 
       var $this = $(this); 
       var lenght_td = $this.parents('tr').find('td').length; 
       i++; 
       $.each(filter_tags, function (i, a_filter) { 
        if ($this.text().toLowerCase().indexOf(a_filter) !== -1) { 
         c++; 
         if (c == filter_tags_length) { 
          matches = 1; 
         } 
        } 
       }); 
       // console.log(matches); 
       if (i == lenght_td) { 
        if (matches > 0) { 
         $(this).parents("tr").removeClass("hidden"); 
        } else { 
         $(this).parents("tr").addClass("hidden"); 
        } 
       } 
      }); 
      //console.log('next'+count); 
     }); 
    } else { 
     $("#dep td").parent("tr").removeClass("hidden"); 
    } 
});

来源

2013-07-25 16:24:46

嗨Tushar。我正在考虑索引中的一些问题，但它比我想象的要复杂得多，谢谢你的帮助。只有一件事，我只想显示匹配所有关键字的'tr'，而不是匹配其中一个关键字的'tr'。我无法确定你为什么改善了行为。 –

你是说如果你一起输入两个关键字？ –

是的，如果我输入“hi bye”，我只想显示包含“hi”和“bye”的“tr”。 –

我今天写了这个类似的目的...希望它有帮助！

$("#kwd_search").keyup(function() { 
    var jqSearchBox = $(this); 
    var rows = $("#dep > tbody > tr"); 

    if (jqSearchBox.val().length < 2) { 
     rows.show(); 
     return; 
    } else { 
     rows.hide(); 
    } 

    // split, trim, lowercase, and remove empty strings 
    var searchTerms = $.map(jqSearchBox.val().toLowerCase().split(" "), function (el) { 
     return el !== "" ? $.trim(el) : null; 
    }); 

    rows.each(function() { 
     var row = $(this); 
     var foundAll = true; 

     $.each(searchTerms, function (idx, val) { 
      if (row.text().toLowerCase().indexOf(val) === -1) { 
       foundAll = false; 
       return false; 
      } 
     }); 

     if (foundAll) 
      row.show();     
    }); 
});

来源

2014-12-03 18:40:23 Kidquick

表jQuery多值过滤器

回答

相关问题