Bộ lọc + Tìm kiếm với các đồng vị Breaks Tìm kiếm?

Question

Tôi đang sử dụng Đồng vị (v1) và đã tạo trường tìm kiếm sau an example in a Pen.

Ban đầu nó hoạt động, tuy nhiên, nếu tôi lọc bộ sưu tập đồng vị thì trường tìm kiếm sẽ ngừng hoạt động.

Tôi tin rằng chức năng tìm kiếm vẫn chạy không lọc bộ sưu tập và tôi không chắc chắn cách khắc phục sự cố. Trong thực tế, tôi không chắc chắn những gì vấn đề chính xác là không có lỗi được ném.

Here is a Fiddle với ví dụ làm việc.

Dưới đây là tìm kiếm, lọc và đồng vị 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); 
    } 
    } 

Làm thế nào để giải quyết vấn đề?

Lưu ý: Tôi đang sử dụng jQuery 2.1.1.

Answer 1

Trong ví dụ: $('#filters').on('click', '.button', function() dừng chức năng tìm kiếm và bạn đặt lại buton được đặt bên trong #filters div để khi bạn nhấp vào công cụ tìm kiếm cũng bị dừng.

Tôi đã không phải là giải pháp tốt nhất, nhưng nó giải quyết một số vấn đề:

Idea trong việc sử dụng chức năng gọi động cơ trở lại:

var iso = function() { 

//engine here 

} 

và

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

mà không setTimeout nó có thể' t làm việc.

Nhưng nó không giải quyết được vấn đề chính

nhìn vào FIDDLE và bạn sẽ hiểu những gì tôi có nghĩa là

Hoặc bạn chỉ có thể đặt thiết lập lại và Hiển thị tất cả các nút #filters ngoài div

Answer 2

Tôi đã gặp phải vấn đề tương tự khi triển khai chức năng Bộ lọc + Tìm kiếm.

Tôi giải quyết vấn đề này chuyển chức năng lọc sang cuộc gọi đồng vị ($container.isotope();) trong chức năng tìm kiếm (function searchFilter(){...}) thay vì khi khởi tạo thể hiện Isotope.

Vì vậy, trong mã của bạn nó phải như thế này:

// 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; 
    } 
    }); 
}