1

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 );
  }
}
Community
  • 1
  • 1
  • You should explain your problem and share your code in the question instead of linking to other questions/websites. Screenshots of code are usually very badly received. – TimoStaudinger Jun 20 '16 at 17:32
  • Already explained in my post, I can't go more detailed as I'm not good with JS. –  Jun 20 '16 at 17:36

0 Answers0