Isotope Search+ Filter

by raskalbass

HTML

<script src="http://www.mmjkarma.com/js/isotope/jquery.isotope.min.js"></script>
<section id="filters">
     <h3>Strain Bank Filters</h3>

    <ul class="filter button-group radius" data-filter-group="strains">
        <li><a class="iso button secondary tiny active" href="#filter-strains-any" data-filter="*">Show All</a>

        </li>
        <li><a class="button secondary tiny" href="#filter-strains-sativa" data-filter=".sativa">Sativa</a>

        </li>
        <li><a class="button secondary tiny" href="#filter-strains-sativa-dom" data-filter=".sativa-dom">Sativa Dominant</a>

        </li>
        <li><a class="button secondary tiny" href="#filter-strains-hybrid" data-filter=".hybrid">Hybrid</a>

        </li>
        <li><a class="button secondary tiny" href="#filter-strains-indica-dom" data-filter=".indica-dom">Indica Dominant</a>

        </li>
        <li><a class="button secondary tiny" href="#filter-strains-indica" data-filter=".indica">Indica</a>

        </li>
    </ul>
    <div class="row">
        <div class="small-4 columns">
            <div class="row collapse">
                <div class="small-9 columns">
                    <input type="text" id="quicksearch" placeholder="Search Strains" />
                </div>
                <div class="small-3 columns"> <a id="reset" href="#" class="iso button postfix secondary">Reset</a>

                </div>
            </div>
        </div>
    </div>
</section>
<ul class="isotope">
    <li class="element hybrid a" data-category="hybrid">
        <p class="type">H</p>
         <h2 class="name">Acapulco Gold</h2>

        <p class="strain-info">No Info Available</p>
        <p class="review"><a class="button radius small black review-form-lb" href="#review-form-lightbox">Review Strain</a>

        </p>
    </li>
    <li class="element indica a" data-category="indica">
        <p class="type">I</p>
         <h2 class="name">Afghan Kush</h2>

        <p class="strain-info">No Info Available</p>
       ...

CSS

.isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
/**** Isotope CSS3 transitions ****/
 .isotope, .isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -ms-transition-property: -ms-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    transition-property: transform, opacity;
}
.isotope li {
    list-style:none;
}
.isotope:after {
    content:'';
    display: block;
    clear: both;
}
.button-group .active, button.secondary:focus, .button.secondary:focus {
    color:#fff;
    background:#111;
}
button.tiny, .button.tiny {
    font-size:0.8875rem;
    font-weight:bold;
}
.element .strain-info, .element .button, .element .rating, .element .button-group {
    visibility:hidden;
}
.element.large .strain-info, .element.large .button, .element.large .rating, element.large .button-group {
    visibility:visible;
}
/* 
.element .button{
	float:right;
	margin-right:5px;
} 

.view-strain{
	position:absolute;
	bottom:0;
	right:145px;
}
 */
 .element {
    width: 100px;
    height: 100px;
    margin: 5px;
    float: left;
    overflow: hidden;
    position: relative;
    background: #888;
    color: #fff;
    border-radius:20px 5px;
    -webkit-transform:translate3d(0, 0, 0);
    -moz-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0);
}
.element.sativa {
    background: #990000;
}
.element.sativa-dom {
    background: #0d6e00;
}
.element.hybrid {
    background:...

JavaScript

var iso = function() {
        var $container = $('.isotope'),
            qsRegex,
            filters = {};

        $container.isotope({
            itemSelector: '.element',
            masonry: {
                columnWidth: 120
            },
            getSortData: {
                name: function ($elem) {
                    return $elem.find('.name').text();
                }
            },
            filter: function () {
                return qsRegex ? $(this).text().match(qsRegex) : true;
            }
        });

        function searchFilter() {
            qsRegex = new RegExp($quicksearch.val(), 'gi');
            $container.isotope();
        }

        // use value of search field to filter
        var $quicksearch = $('#quicksearch').keyup(debounce(searchFilter));

        $('#reset').on('click', function () {
            $quicksearch.val('');
            searchFilter();
        });


        $('#filters').on('click', '.button', function () {
            var $this = $(this);
            // get group key
            var $buttonGroup = $this.parents('.button-group');
            var filterGroup = $buttonGroup.attr('data-filter-group');
            // set filter for group
            filters[filterGroup] = $this.attr('data-filter');
            // combine filters
            var filterValue = '';
            for (var prop in filters) {
                filterValue += filters[prop];
            }

            // convert object into array
            var isoFilters = [];
            for (prop in filters) {
                isoFilters.push(filters[prop]);
            }
            // set filter for Isotope
            $container.isotope({
                filter: filterValue
            });
            var selector = isoFilters.join('');
            $container.isotope({
                filter: selector
            }, function noResultsCheck() {
                var noItems = $('<div class="element no-results large"><p class="type">Oops!</p><p...