filter+使用同位素搜索中断搜索？

我正在使用Isotopes（v1），并在Pen中的示例后创建了一个搜索字段。

但是，最初它可以工作，如果我过滤同位素库，那么搜索字段就会停止工作。

我相信搜索function仍然运行只是不过滤库，我不知道如何解决问题。 事实上，我不确定究竟是什么问题，因为没有错误被抛出。

这是一个小提琴，有一个工作的例子。

这是搜索，过滤和同位素JavaScript：

var $container = $('.isotope'), qsRegex, filters = {}; $container.isotope({ itemSelector : '.element', masonry : { columnWidth : 120 }, getSortData : { name : function ( $elem ) { return $elem.find('.name').text(); } }, filter: function() { return qsRegex ? $(this).text().match( qsRegex ) : true; } }); function searchFilter() { qsRegex = new RegExp( $quicksearch.val(), 'gi' ); $container.isotope(); } // use value of search field to filter var $quicksearch = $('#quicksearch').keyup( debounce( searchFilter ) ); $('#reset').on( 'click', function() { $quicksearch.val(''); searchFilter() }); // store filter for each group $('#filters').on( 'click', '.button', function() { var $this = $(this); // get group key var $buttonGroup = $this.parents('.button-group'); var filterGroup = $buttonGroup.attr('data-filter-group'); // set filter for group filters[ filterGroup ] = $this.attr('data-filter'); // combine filters var filterValue = ''; for ( var prop in filters ) { filterValue += filters[ prop ]; } // set filter for Isotope $container.isotope({ filter: filterValue }); }); // 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 ); } } 

我该如何解决这个问题？

注意：我使用的是jQuery 2.1.1。

Answer 1

在你的示例$('#filters').on('click', '.button', function ()停止搜索function，你重置buton放在#filters div中，所以当你点击它时，搜索引擎也会停止。

我没有最好的解决方案，但它解决了一些问题：

使用函数调用引擎的想法：

 var iso = function() { //engine here } 

和

 $(function () { iso(); $('.iso').click(function(){ setTimeout(iso, 500); }); }); 

没有setTimeout它无法工作。

但它并没有解决主要问题

看看FIDDLE ，你会理解我的意思

或者你可以在#filters div之外放置重置和显示所有按钮

Answer 2

我在实现filter+搜索function时面临同样的问题。

我解决了这个问题，将过滤函数传递给搜索函数（ function searchFilter(){...} ）中的Isotope调用（ $container.isotope(); ），而不是在初始化Isotope实例时。

所以，在你的代码中它应该是这样的：

 // No filter specified when initializing the Isotope instance $container.isotope({ itemSelector : '.element', masonry : { columnWidth : 120 }, getSortData : { name : function ( $elem ) { return $elem.find('.name').text(); } } }); 

 // Instead, the filter is specified here function searchFilter() { qsRegex = new RegExp( $quicksearch.val(), 'gi' ); $container.isotope({ filter: function() { return qsRegex ? $(this).text().match( qsRegex ) : true; } }); }