Filtres + Recherche par Isotopes Pauses Recherche?

Question

J'utilise des isotopes (v1) et j'ai créé un champ de recherche suivant an example in a Pen.

Initialement, cela fonctionne, cependant, si je filtre la galerie d'isotopes, le champ de recherche cesse de fonctionner. Je crois que la fonction de recherche fonctionne encore ne filtre pas la galerie et je ne sais pas comment résoudre le problème. En fait, je ne sais pas quel est le problème exact car aucune erreur n'est levée.

Here is a Fiddle avec un exemple de travail.

Voici la recherche, filtre et JavaScript isotope:

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

Comment puis-je résoudre le problème?

Remarque: J'utilise jQuery 2.1.1.

Answer 1

Dans votre exemple $('#filters').on('click', '.button', function() vous pouvez arrêter la fonction de recherche et réinitialiser le bouton placé à l'intérieur de #filtres div. Lorsque vous cliquez dessus, le moteur de recherche est également arrêté.

Je n'ai pas la meilleure solution, mais il résoudre certains problèmes:

Idée en utilisant la fonction pour appeler moteur arrière:

var iso = function() { 

//engine here 

} 

et

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

sans setTimeout il peut » t travail.

Mais il ne résout pas le problème principal

regard sur FIDDLE et vous comprendrez ce que je veux dire

Ou vous ne pouvez placer réinitialisée et afficher tous les boutons extérieurs #filters div

Answer 2

J'ai rencontré le même problème en implémentant les fonctionnalités Filtres + Recherche. J'ai résolu ce problème en passant la fonction filtre à l'appel isotope ($container.isotope();) dans la fonction de recherche (function searchFilter(){...}) au lieu de l'initialisation de l'instance Isotope.

Donc, dans votre code devrait ressembler à ceci:

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