jQuery liveFilter 结合类别过滤器答案

【问题标题】：jQuery liveFilter combined with category filterjQuery liveFilter 结合类别过滤器
【发布时间】：2011-03-24 13:10:42
【问题描述】：

您好——我想知道是否可以将 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>

【问题讨论】：

标签： jquery search filter categories

【解决方案1】：

通过将过滤器值从 livefilter 和 catgory 更改为全局过滤器，您可以将它们组合成一个过滤器，如下所示：

<!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>

这只是一个快速而肮脏的解决方案。也许您可以抽象过滤，以便 livefilter 和 categoryfilter 使用相同的函数进行过滤。那将是很多“更干净”的代码。

【讨论】：

太棒了！感谢您的帮助！