jQuery实时过滤器与分类过滤器的结合

Question

jQuery实时过滤器与分类过滤器的结合

3

你好 - 我想知道是否可以将liveFilter与分类过滤器一起使用？下面的代码将通过输入或选择类别进行筛选。我希望能够通过两种方式搜索。换句话说，如果选择了“动作”类别 - liveFilter输入仍将在“动作”类别内缩小搜索范围。有什么想法吗？谢谢！

这是页面：http://dl.dropbox.com/u/222645/livefilter.html

这是html:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>LiveFilter 1.1</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script>//liveFilter 1.1 plugin
        (function($){  
            $.fn.liveFilter = function (wrapper) {
                var wrap = '#' + $(this).attr('id');
                var item = 'li';
                $('input.filter').keyup(function() {
                    var filter = $(this).val();

                    // Hide all the items and then show only the ones matching the filter
                    $(wrap + ' ' + wrapper + ' ' + item).hide();
                    $(wrap + ' ' + wrapper + ' ' + item + ':Contains("' + filter + '")').show();
                });

                // Custom expression for case insensitive contains()
                jQuery.expr[':'].Contains = function(a,i,m){
                    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
                };
            }
        })(jQuery);
    </script>
    <script type="text/javascript"> // Activate liveFilter plugin
    $(document).ready(function() {
        $('#list_wrapper').liveFilter('ul');
    });
    </script>

    <script> // Filter Results by Category (not part of liveFilter)
    $(document).ready(function(){
        $('#filter-buttons a').click(function(e){
        e.preventDefault();
        var filter = $(this).attr('id');
        $('#list_wrapper ul li').show();
        $('#list_wrapper ul li:not(.' + filter + ')').hide();
        });
    });
    </script>

</head>
<body>
<div id="page_wrapper">
    <div id="list_wrapper">
        <input class="filter" name="livefilter" type="text" value="" />

        <div id="filter-buttons"><!--Filter by Category (not part of liveFilter)-->
            <a href='#'>All</a>
            <a href='#' id='action'>Action</a>
            <a href='#' id='drama'>Drama</a>
            <a href='#' id='comedy'>Comedy</a>
        </div>

        <ul class="live_filter">
            <li class="drama"><a href="#">The Shawshank Redemption (1994)</a></li>
            <li class="action"><a href="#">The Godfather (1972)</a></li>
            <li class="action"><a href="#">Pulp Fiction (1994)</a></li>
            <li class="action"><a href="#">The Dark Knight (2008)</a></li>
            <li class="drama"><a href="#">Schindler's List (1993)</a></li>
            <li class="comedy"><a href="#">One Flew Over the Cuckoo's Nest (1975)</a></li>
            <li class="comedy"><a href="#">Dumb and Dumber (1995)</a></li>
            <li class="action"><a href="#">The Empire Strikes Back (1980)</a></li>
            <li class="drama"><a href="#">Casablanca (1942)</a></li>
            <li class="action"><a href="#">Star Wars (1977)</a></li>
        </ul>
    </div>
</div>
</body>
</html>

- Josiah

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Falle1234 · Accepted Answer

通过将筛选器从实时筛选和类别更改为全局筛选器，您可以将它们合并为一个筛选器，如下所示：

<!DOCTYPE html> 
<html> 
    <head> 
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
        <title>LiveFilter 1.1</title> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
        <script>//liveFilter 1.1 plugin
            var catgory = 'All';
            var filter = '';
            (function($){  
                $.fn.liveFilter = function (wrapper) {
                    var wrap = '#' + $(this).attr('id');
                    var item = 'li';
                    $('input.filter').keyup(function() {
                        filter = $(this).val();

                        // Hide all the items and then show only the ones matching the filter
                        $(wrap + ' ' + wrapper + ' ' + item).hide();
                        $(wrap + ' ' + wrapper + ' ' + item + ':Contains("' + filter + '")').show();
                        $(wrap + ' ' + wrapper + ' ' + item + ':linot(.' + category + ')').hide();
                    });

                    // Custom expression for case insensitive contains()
                    jQuery.expr[':'].Contains = function(a,i,m){
                        return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
                    };
                }
            })(jQuery);
        </script> 
        <script type="text/javascript"> // Activate liveFilter plugin
        $(document).ready(function() {
            $('#list_wrapper').liveFilter('ul');
        });
        </script> 

        <script> // Filter Results by Category (not part of liveFilter)
        $(document).ready(function(){
            $('#filter-buttons a').click(function(e){
            e.preventDefault();
            category = $(this).attr('id');
            $('#list_wrapper ul li').hide();
            $('#list_wrapper ul li:Contains("' + filter + '")').show();
            $('#list_wrapper ul li:not(.' + category + ')').hide();
            });
        });
        </script> 

    </head> 
<body> 
    <div id="page_wrapper"> 
        <div id="list_wrapper"> 
            <input class="filter" name="livefilter" type="text" value="" /> 

            <div id="filter-buttons"><!--Filter by Category (not part of liveFilter)--> 
                <a href='#'>All</a> 
                <a href='#' id='action'>Action</a> 
                <a href='#' id='drama'>Drama</a> 
                <a href='#' id='comedy'>Comedy</a> 
            </div> 

            <ul class="live_filter"> 
                <li class="drama"><a href="#">The Shawshank Redemption (1994)</a></li> 
                <li class="action"><a href="#">The Godfather (1972)</a></li> 
                <li class="action"><a href="#">Pulp Fiction (1994)</a></li> 
                <li class="action"><a href="#">The Dark Knight (2008)</a></li> 
                <li class="drama"><a href="#">Schindler's List (1993)</a></li> 
                <li class="comedy"><a href="#">One Flew Over the Cuckoo's Nest (1975)</a></li> 
                <li class="comedy"><a href="#">Dumb and Dumber (1995)</a></li> 
                <li class="action"><a href="#">The Empire Strikes Back (1980)</a></li> 
                <li class="drama"><a href="#">Casablanca (1942)</a></li> 
                <li class="action"><a href="#">Star Wars (1977)</a></li> 
            </ul> 
        </div> 
    </div> 
</body> 
</html>

这只是一个快速而简单的解决方案。也许你可以将过滤器抽象出来，使得实时过滤和分类过滤使用相同的函数进行过滤。这样代码会更加"干净"。