Skip to content

Instantly share code, notes, and snippets.

@kosmiq
Created September 30, 2015 10:52
Show Gist options
  • Save kosmiq/83ff0e2be8478379d074 to your computer and use it in GitHub Desktop.
Save kosmiq/83ff0e2be8478379d074 to your computer and use it in GitHub Desktop.
Use a text field to filter Isotope items based on whatever is in their "data-category" attribute.
$( function() {
// quick search regex
var qsRegex;
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
filter: function() {
return qsRegex ? $(this).data("category").match( qsRegex ) : true;
}
});
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
}, 200 ) );
});
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
return function debounced() {
if ( timeout ) {
clearTimeout( timeout );
}
function delayed() {
fn();
timeout = null;
}
timeout = setTimeout( delayed, threshold || 100 );
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment