過濾器+同位素搜索中斷搜索？

Question

我正在使用同位素（v1），並在an example in a Pen後創建了一個搜索字段。

最初它的工作原理，但是，如果我篩選同位素畫廊然後搜索字段停止工作。

我相信搜索功能仍然運行只是不過濾畫廊，我不確定如何解決問題。事實上，我不確定具體問題是什麼，因爲沒有發生錯誤。

Here is a Fiddle附帶一個工作示例。

這裏是搜索，過濾和同位素的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()停止搜索功能，你重置buton放在#filters div裏面，所以當你點擊它時搜索引擎也停止了。

我已經不是最好的解決方案，但它解決了一些問題：

Idea在使用函數調用引擎回：

var iso = function() { 

//engine here 

} 

和

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

沒有的setTimeout它可以」工作。

但它並沒有解決的主要問題

看看FIDDLE，你就會明白我的意思

，或者你可以將重置並顯示所有按鈕外#filters div的

Answer 2

我遇到了實現「過濾器+搜索」功能的相同問題。

我解決了這個問題，通過代替初始化同位素例如當過濾器功能，在搜索功能（function searchFilter(){...}）同位素調用（$container.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; 
    } 
    }); 
}