Isotop-Nachbestellung nach der Suche funktioniert nicht

Question

Ich habe ein Jquery-Such-Plugin integriert, um Isotop-Elemente zu durchsuchen. Das Plugin verwendet reguläre Ausdrücke, um Inhalte in Echtzeit basierend auf den Sucheingaben zu sortieren.

Isotopen-Elemente werden automatisch aktualisiert (Ich verwende ein Wordpress-Plugin, das Daten aus sozialen Netzwerken abgerufen)

Meine Frage ist, wie kann ich die Elemente, nachdem die Suche durchgeführt wird neu anordnen?

LE: Ich habe diese GELöST VON ANDERER PlugIn für SEARCHING VERWENDUNG: Hier ist der Code:

   $(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

wie Sie $ Behälter in die .load erklären, wird nur .load Funktion sieht es

zwei Lösungen, Sie var $ container = $() hinzuzufügen; so in den normalen js .load und .ready wird es Zugriff

oder Sie verschmelzen alle in die .ready Funktion:

$(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

konnte ich ein One-Shot-Beispiel zum Laufen bringen, indem das Hinzufügen von folgenden bis Ende Datei Ihre 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' }); 

Dies funktioniert nur erste Mal, wenn Sie auf search 1 klicken, zeigt aber das Konzept des Isotops Neustart gültig ist. Ich verstehe nicht genug, wie deine Filterung funktioniert, aber ich hoffe, dass dir das einen Ausgangspunkt gibt.

Es gibt ein Problem, dass der Content-Filter-Elemente display: none mit hide() oder fade() beseelt, so dass dies funktioniert nur, wenn die Haut Augenblick war (also habe ich auch den Filter hide(0) zu verwenden), z.B.

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