Resorting ISOtope elements after Search

Question

I'm developing a new Hall of Fame for the Wisconsin Badgers. My beta version is viewable at http://www.uwbadgers.com/athletic-dept/hall-fame-beta.html

My question is, when the search feature is used how do I bring the visible elements to the top. It show the correct elements and uses display:none to hide the others. However it does not re-position the elements after the search and the display:none elements still take up space.

It has to do with the "-webkit-transform" style that isotope uses. How do I go about changing this or is there a better way to search using isotope?

I am using http://lomalogue.com/jquery/quicksearch/ for the search as I could not think of a way to do it with isotope alone.

Onestep

Answer 1

I would use quicksearch's show and hide options to add appropriate classes that can be used for filtering by Isotope

$('input#id_search').quicksearch('div.member', {
  show: function () {
    $(this).addClass('quicksearch-visible');
  },
  hide: function() {
    $(this).removeClass('quicksearch-visible');
  },
  onAfter: function() {
    $container.isotope({ filter: 'quicksearch-visible'});
  }
});

Summit

Thank you, I used this ($container.isotope({ filter: $current_filter});) in the callback of Infinite Scrolling after filtering has been applied to the items. – Wincer