JSFiddle - React, Tailwind, and code Playground

by bellamystudio

HTML

<div id="page_wrapper"> 
        <div id="list_wrapper"> 
            <!--input class="filter" name="livefilter" type="text" value="" /--> 
            <select name="livefilter" class="filter">
                <option value="The">The</option>
                <option value="1994">1994</option>
            </select>
            <div id="filter-buttons"><!--Filter by Category (not part of liveFilter)--> 
                <a href='#' id='All'>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>

CSS

/**** Isotope Filtering ****/

.live_filter li {
  z-index: 2;
}

.live_filter li.hidden {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.live_filter, .live_filter li {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.live_filter {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.live_filter li {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

/* End: Recommended Isotope styles */

JavaScript

//liveFilter 1.1 plugin
            var category = 'All';
            var filter = '';
            (function($){  
                $.fn.liveFilter = function (wrapper) {
                    var wrap = '#' + $(this).attr('id');
                    var item = 'li';
                    $('select.filter').change(function() {
                        filter = $(this).val();
                        // Hide all the items and then show only the ones matching the filter
                        $(wrap + ' ' + wrapper + ' ' + item).addClass('hidden').hide();
                        $(wrap + ' ' + wrapper + ' ' + item + ':Contains("' + filter + '")').removeClass('hidden').show();
                        $(wrap + ' ' + wrapper + ' ' + item + ':linot(.' + category + ')').addClass('hidden').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);


// Activate liveFilter plugin
        $(document).ready(function() {
            $('#list_wrapper').liveFilter('ul');
        });

// Filter Results by Category (not part of liveFilter)
        $(document).ready(function(){
            $('#filter-buttons a').click(function(e){
            e.preventDefault();
            category = $(this).attr('id');
            if (category == 'All') {$('#list_wrapper ul li').slideDown('fast')}
                else {
            //$('#list_wrapper ul li').addClass('hidden').slideUp('fast');
            $('#list_wrapper ul li:Contains("' + filter + '")').removeClass('hidden').slideDown('fast');
            $('#list_wrapper ul li:not(.' + category + ')').addClass('hidden').slideUp('fast');
            }
            });
        });