搜索后使用同位素元素

Question

我正在为威斯康星獾队开发一个新的名人堂。我的测试版可以在http://www.uwbadgers.com/athletic-dept/hall-fame-beta.html查看

我的问题是，当使用搜索功能时，如何将可见元素置于顶部。它显示正确的元素并使用 display:none 隐藏其他元素。但是，它不会在搜索后重新定位元素，并且 display:none 元素仍然占用空间。

这与 isotope 使用的“-webkit-transform”样式有关。我该如何改变这一点，或者有没有更好的方法来使用同位素进行搜索？

我正在使用http://lomalogue.com/jquery/quicksearch/ 进行搜索，因为我想不出单独使用同位素的方法。

Answer 1

我会使用 quicksearch 的 show 和 hide 选项来添加可用于同位素过滤的适当类

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