isotope search

by Jon Eyrick

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<script src="http://inknows.com/lib/jquery.quicksearch.js"></script>
<div id="filters">
    <form>
        <p>Search:</p>
        <input type="text" id="discussion-search">
    </form>
</div>
<div id="container">
    <div class="item red">
        <p>Red</p>
    </div>
    <div class="item blue">
        <p>Blue</p>
    </div>
    <div class="item green">
        <p>Green</p>
    </div>
    <div class="item yellow">
        <p>Yellow</p>
    </div>
    <div class="item red">
        <p>Red</p>
    </div>
    <div class="item blue">
        <p>Blue</p>
    </div>
    <div class="item green">
        <p>Green</p>
    </div>
    <div class="item yellow">
        <p>Yellow</p>
    </div>
    <div class="item red">
        <p>Red</p>
    </div>
    <div class="item blue">
        <p>Blue</p>
    </div>
    <div class="item green">
        <p>Green</p>
    </div>
    <div class="item yellow">
        <p>Yellow</p>
    </div>
    <div class="item red">
        <p>Red</p>
    </div>
    <div class="item blue">
        <p>Blue</p>
    </div>
    <div class="item green">
        <p>Green</p>
    </div>
    <div class="item yellow">
        <p>Yellow</p>
    </div>
    <div class="item red">
        <p>Red</p>
    </div>
    <div class="item blue">
        <p>Blue</p>
    </div>
    <div class="item green">
        <p>Green</p>
    </div>
    <div class="item yellow">
        <p>Yellow</p>
    </div>
</div>

CSS

body {
    font-family:'Helvetica Neue', Arial, sans-serif;
}
#container {
    border: 1px solid;
    padding: 3px;
    margin:10px 0;
}
.item {
    width: 70px;
    height: 70px;
    margin: 3px;
    float: left;
}
.red {
    background: red;
}
.blue {
    background: blue;
}
.green {
    background: green;
}
.yellow {
    background: yellow;
}
/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/
 .isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
    opacity:0;
}
/**** Isotope CSS3 transitions ****/
 .isotope, .isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
 .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    transition-duration: 0s;
}
/* End: Recommended Isotope styles */

JavaScript

$(function () {

    var $container = $('#container');

    $container.isotope({
        itemSelector: '.item'
    });


    $('input#discussion-search').quicksearch('#container .item', {
        'show': function () {
            $(this).addClass('quicksearch-match');
        },
            'hide': function () {
            $(this).removeClass('quicksearch-match');
        }
    }).keyup(function () {
        setTimeout(function () {
            $container.isotope({
                filter: '.quicksearch-match'
            }).isotope();
        }, 100);
    });

});