javascript - 过滤 DIV 内容

Question

我制作了这个 jsFiddle来搜索/过滤div我从 XML 响应中获得的内容。但我只为一个文本框完成了它。任何人都可以帮助我实施接下来的三个？

例如：

如果我正在输入pd001它会显示前 2 行，如果我输入 paste 它应该从当前可见列表而不是整个列表中到达并过滤。

请帮我解决这个问题。

Answer 1

如果我没记错，那么您必须尝试做的是，如果我基于搜索 2 行pd001并将其放入paste下一个文本框，那么它应该只过滤那 2 行而不是整个网格。所有其他文本框的功能相同。事实上，你需要依赖 b/w 文本框。

试试这个：

    $(".productid").filter(function () {
        $(this).parent().hide();
        return $(this).text().toLowerCase().indexOf(text0) != -1
    }).parent().show();

    $(".product:visible").filter(function () {
       $(this).parent().hide();
       return $(this).text().toLowerCase().indexOf(text1) != -1; 
    }).parent().show();

    $(".quantity:visible").filter(function () {
       $(this).parent().hide();
       return $(this).text().toLowerCase().indexOf(text2) != -1; 
    }).parent().show();

    $(".amount:visible").filter(function () {
       $(this).parent().hide();
       return $(this).text().toLowerCase().indexOf(text3) != -1; 
    }).parent().show();

演示：http: //jsfiddle.net/fbC6w/4/

Answer 2

您只过滤一列，它可能会对您有所帮助

$("#searchone , #searchtwo ,#searchthree ,#searchfour").bind("keyup", function() {

    var map = {
        '.productid': $("#searchone").val().toLowerCase(),
        '.product': $("#searchtwo").val().toLowerCase(),
        '.quantity': $("#searchthree").val().toLowerCase(),
        '.amount': $("#searchfour").val().toLowerCase()
    };
    $('div.new').each(function() {
        $(this).hide();
    });
    $('div.new').each(function() {
        var parent_div = this;
        $.each(map, function(key, value) {
            $(parent_div).find(key).filter(function() {
                if ($(this).text().toLowerCase().indexOf(value.toString()) != -1 && value != '') {
                    $(parent_div).show();
                }
            });
        });
    });

});​