Question

我正在寻找一种方法来实时搜索我的网格+复选框以进行过滤。我和学生们有一个网格（照片和名字）。我想要的是复选框，它可以过滤学生所在的不同课程。还有一个搜索栏，我可以在其中输入学生姓名。

我有两个元素工作，一个搜索栏和要过滤的复选框。但他们不能一起工作。

当我输入彼得时，它显示了我想要的彼得，但是当我检查A时，我看到所有来自A级的学生。当然，我仍然应该看到彼得。当我取消选中时没有显示任何内容。我能做些什么来让两者一起工作？看我的小提琴。

$(document).ready(function () {
    $("#filter").keyup(function () {

        // Retrieve the input field text and reset the count to zero
        var filter = $(this).val(),
            count = 0;

        // Loop through the comment list
        $("li").each(function () {

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut(0);

                // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).show();
                count++;
            }
        });

        // Update the count
        var numberItems = count;
        $("#filter-count").text("Number of Comments = " + count);
    });
});

$(document).ready(function () {
    $('.studentList > li.' + $(this).attr('rel')).show();

    $('div.tags').find('input:checkbox').live('click', function () {
        $('.studentList > li').hide();
        $('div.tags').find('input:checked').each(function () {
            $('.studentList > li.' + $(this).attr('rel')).show();
        });
    });
});

Answer 1

您可以在已隐藏的学生上添加课程，并从展示行为中排除：

$(document).ready(function () {
    $("#filter").keyup(function () {

        // Retrieve the input field text and reset the count to zero
        var filter = $(this).val(),
            count = 0;

        // Loop through the comment list
        $("li").each(function () {

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut(0).addClass('hidden');

                // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).show().removeClass('hidden');
                count++;
            }
        });

        // Update the count
        var numberItems = count;
        $("#filter-count").text("Number of Comments = " + count);
    });
});

$(document).ready(function () {
    $('.studentList > li.' + $(this).attr('rel')).show();

    $('div.tags').find('input:checkbox').live('click', function () {
        $('.studentList > li').hide();
        $('div.tags').find('input:checked').each(function () {
            $('.studentList > li.' + $(this).attr('rel')).not('.hidden').show();
        });
    });
});

jsfiddle：http://jsfiddle.net/wpxajkcw/

要解决取消选中cehckbox：

$(document).ready(function () {
    $('.studentList > li.' + $(this).attr('rel')).show();

    $('div.tags').find('input:checkbox').live('click', function () {

        if($('div.tags').find('input:checkbox:checked').length > 0){
        $('.studentList > li').hide();
        $('div.tags').find('input:checked').each(function () {
            $('.studentList > li.' + $(this).attr('rel')).not('.hidden').show();
        });
        } else {
            $('.studentList > li').not('.hidden').show();
        }
    });
});

更新了jsfiddle：http://jsfiddle.net/wpxajkcw/1/

Jquery实时搜索和复选框过滤器，网格

1 个答案: