quick-searchjquery-isotope

Resorting ISOtope elements after Search


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.


Solution

  • 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'});
      }
    });