All geek questions in one place

JQuery liveFilter combined with category filter

Hey. I was wondering if it is possible to use liveFilter in combination with a category filter? The code below will be filtered by entering or selecting a category. I would like to be able to search on BOTH. In other words, if the “action category” is selected, then in the “liveFilter” mode the search will narrow down in the “action category”. Any ideas? Thank!

Here is the page: http://dl.dropbox.com/u/222645/livefilter.html

Here is this 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 List (1993)</a></li>
            <li class="comedy"><a href="#">One Flew Over the Cuckoo 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>
+3
source share
1 answer

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 List (1993)</a></li> 
                <li class="comedy"><a href="#">One Flew Over the Cuckoo 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 . "" .

+3

Source: https://habr.com/ru/post/1757768/

More articles:


All Articles