Riordino isotopico dopo la ricerca non funzionante

Question

Ho integrato un plug-in di ricerca jquery per cercare elementi di isotopi, il plug-in utilizza l'espressione regolare per ordinare il contenuto, in tempo reale, in base all'input di ricerca.

elementi Isotope sta aggiornando automaticamente (sto usando un plugin per WordPress che recupera i dati dai social network)

La mia domanda è, come posso riordinare gli elementi dopo l'esecuzione della ricerca?

LE: Ho risolto questo utilizzando ALTRE Plugin per SEARCHING: Ecco il codice:

   $(document).ready(function() { 
      $("#id_search").quicksearch(".dcsns-content .isotope-item", { 
       noResults: '#noresults', 
       loader: 'span.loading', 

       'show': function() { 
    $(this).addClass('quicksearch-visible'); 
}, 
'hide': function() { 
    $(this).removeClass('quicksearch-visible'); 
}, 
'onAfter': function() { 
    $('.dcsns-content .stream').isotope({ filter: '.quicksearch-visible' }); 
} 
      }); 
     }); 

Answer 1

come si dichiara $ contenitore nel .load, la funzione solo .load lo vedrà

due soluzioni, si aggiunge var $ container = $(); nei js normali così .load e .ready sarà accedervi

oppure unire tutti nella funzione .ready:

$(function(){ 
    var $searchBox = $("#searchbox"); 
    var $searchFilter = $('.searchFilter'); 
    var $container = $('.wall-outer .stream'); 

    $searchBox.on("blur",function(){ 
     if(this.value === '') 
       this.value='Keyword(s)'; 
    }).on("focus",function(){ 
     if(this.value === this.defaultValue) 
       this.value = ''; 
     else this.value = null; 
    }); 

    $searchFilter.simpleContentSearch({ 
     'active' : 'searchBoxActive', 
     'normal' : 'searchBoxNormal', 
     'searchList' : 'dcwss-content ul li',  // this is important 
     'searchItem' : 'div'      // this is important 
    }); 

    $(".search-btn").on("click", function(){ 
     $searchBox.val($(this).data("search")); 
     $searchFilter.keyup(); 
     $container.isotope('reLayout'); 
    }); 

    $(".search-reset").on("click", function(){ 
     $searchBox.val(""); 
     $searchFilter.keyup(); 
     $container.isotope('reLayout'); 
    });    

    $container.isotope('reLayout'); 
}); 

Answer 2

sono stato in grado di ottenere un esempio di one-shot di lavoro aggiungendo quanto segue alla fine del il file filtercontent.js:

// Get isotope container 
    $container = jQuery('.dc-wall .stream'); 

    // Clear out existing isotope class instance 
    $container.data('isotope', null); 

    // Start a new isotope instance on the container 
    $container.isotope({ filter: ':visible', sortBy: 'postDate' }); 

Questo funziona solo la prima volta che si fa clic su search 1, ma mostra il concetto di riavviare isotopo è valido. Non capisco abbastanza di come funziona il tuo filtro, ma spero che questo ti dia un punto di partenza.

C'è un problema nel fatto che il filtro contenuto anima di oggetti per display: none utilizzando hide() o fade(), quindi questo funzionava solo se la pelle era istantanea (quindi anche cambiato il filtro da utilizzare hide(0)) esempio

jQuery(this).parent('.' + settings.searchList).hide(0);