Filter + Suche mit Isotopen Breaks Suche?

Question

Ich verwende Isotope (v1) und habe ein Suchfeld nach an example in a Pen erstellt.

Zunächst funktioniert es jedoch, wenn ich die Isotopengalerie filtere, dann funktioniert das Suchfeld nicht mehr.

Ich glaube, die Suchfunktion läuft immer noch nicht die Galerie und ich bin mir nicht sicher, wie Sie das Problem beheben. In der Tat bin ich mir nicht sicher, was das genaue Problem ist, da keine Fehler geworfen werden.

Here is a Fiddle mit einem Arbeitsbeispiel. Hier

ist die Such-, Filter- und Isotop 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); 
    } 
    } 

Wie löse ich das Problem?

Hinweis: Ich verwende jQuery 2.1.1.

Answer 1

In Ihrem Beispiel $('#filters').on('click', '.button', function() Stoppen der Suchfunktion und Sie setzen Buton in #Filter div so zurückgesetzt, wenn Sie klicken, wird die Suchmaschine auch gestoppt.

Ich habe nicht die beste Lösung, aber es einige Probleme lösen:

Idee in Funktion Motor um Rückruf:

var iso = function() { 

//engine here 

} 

und

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

ohne SetTimeout es kann‘ t arbeiten.

Aber es löst nicht das Hauptproblem

Blick auf FIDDLE und Sie werden verstehen, was ich

bedeuten oder Sie können alle Tasten außerhalb #filters div

Answer 2

zurückgesetzt und zeigen nur platzieren Ich hatte das gleiche Problem mit der Implementierung der Filter + Suchfunktionalität.

Ich löste dieses Problem beim Übergeben der Filterfunktion an den Isotope-Aufruf ($container.isotope();) in der Suchfunktion (function searchFilter(){...}) statt beim Initialisieren der Isotope-Instanz.

in Ihrem Code So sollte es so sein:

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