I have tried this method: Filters + Search with Isotopes Breaks Search?
But it doesn't work for me.
Somehow only 1 can work, previously without search bar, my filter buttons were fine. However after I implement the search box, only the search box is working.
Please take at look (scroll to portfolio): http://sgweddingcollective.com/
Clicking any buttons doesn't do anything, but if i type party in search box it works.
Please help me get both search field and my filter buttons to work TOGETHER, thanks!
$( function() {
// quick search regex
var qsRegex;
// init Isotope
var $container = $('.isotope').isotope({
itemSelector: '.gallery-inner',
layoutMode: 'fitRows',
});
function searchFilter() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$container.isotope({
filter: function() {
return qsRegex ? $(this).text().match( qsRegex ) : true;
}
});
}
// use value of search field to filter
var $quicksearch = $('#quicksearch').keyup( debounce( searchFilter ) );
$('#reset').on( 'click', function() {
$quicksearch.val('');
searchFilter()
});
});
// 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;
}
setTimeout( delayed, threshold || 100 );
}
}