Filtri + Cerca con Isotopi Breaks Cerca?

Question

Sto utilizzando gli isotopi (v1) e ho creato un campo di ricerca dopo an example in a Pen.

Inizialmente funziona, tuttavia, se filtro la galleria Isotopo, il campo di ricerca smette di funzionare.

Credo che la funzione di ricerca continua a funzionare solo non filtra la galleria e non sono sicuro su come risolvere il problema. In effetti, non sono sicuro di quale sia il problema esatto in quanto non vengono emessi errori.

Here is a Fiddle con un esempio funzionante.

Qui è la ricerca, filtro e isotopi 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); 
    } 
    } 

Come posso risolvere il problema?

Nota: sto usando jQuery 2.1.1.

Answer 1

Nell'esempio $('#filters').on('click', '.button', function() interrompendo la funzione di ricerca e si resetta ma inserito all'interno di #filters div così quando si fa clic sul motore di ricerca viene fermato anche.

non ho la soluzione migliore, ma risolvere alcuni problemi:

idea di utilizzare la funzione di chiamare motore posteriore:

var iso = function() { 

//engine here 

} 

e

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

senza setTimeout si può' lavoro.

Ma non risolve il problema principale

sguardo FIDDLE e capirete cosa intendo

Oppure si può mettere solo resettare e visualizzare tutti i pulsanti esterni #filters div

Answer 2

Ho affrontato lo stesso problema implementando filtri + funzionalità di ricerca.

Ho risolto questo problema passando la funzione filtro alla chiamata Isotope ($container.isotope();) nella funzione di ricerca (function searchFilter(){...}) anziché durante l'inizializzazione dell'istanza Isotope.

Così, nel codice che dovrebbe essere simile a questo:

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