isotope reorder after search not working

Question

I've integrated a jquery search plugin to search through isotope elements, the plugin uses regular expression to sort content, in real-time, based on the search input.

Isotope elements are updating automatically ( I'm using a wordpress plugin which retrieves data from social networks )

My question is, how can I reorder the elements after the search is performed?

L.E : I'VE SOLVED THIS BY USING OTHER PLUGIN FOR SEARCHING: Here is the 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

I was able to get a one-shot example working by adding the following to the end of your filtercontent.js file:

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

This only works first time you click on search 1, but shows the concept of restarting isotope is valid. I do not understand enough of how your filtering works, but I hope this does give you a starting point.

There is a problem in that the content filter animates items to display: none using hide() or fade(), so this only worked if the hide was instant (so I also changed the filter to use hide(0)) e.g.

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

Answer 2

as you declare $container into the .load, only .load function will see it

two solutions, you add var $container = $(); in the normal js so .load and .ready will access it

or you merge all into the .ready function :

$(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');
});