7

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' });
}
            });
        });
agis
  • 1,831
  • 10
  • 33
  • 68
  • you are using `jQuery(window).load(function(){` why not `jQuery(document).ready` ? Maybe the elements you are looking for aren't yet present at page loading. Also, I don't see any `.wall-outer` or `.stream` element in your html – TCHdvlp May 17 '13 at 15:49
  • sorry, but this is not helping me; I've asked something else, the search is working, elements are ok, what I need is a method to reorder the elements after search, you just have to check the link – agis May 17 '13 at 16:13
  • my bad, I thought it was a problem with `ReferenceError`. Wmell, the documentation in isotope site talks about `getSortData` parameter. I suppose you allready tried it. – TCHdvlp May 17 '13 at 22:33
  • I've changed to document ready but still the same error with every method I try : $container is not defined. – agis May 20 '13 at 08:54

2 Answers2

3

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);
iCollect.it Ltd
  • 92,391
  • 25
  • 181
  • 202
  • I've put this in the [fiddle](http://jsfiddle.net/dynamyc/V2pQf/9/embedded/result/) but it's strange because is working with just **Search 1** if I click on **Search 2** is not working proper. What it can work is to ,ake something like when "search 1" is clicked reorder the elements and when "search 2" is clicked first thing is to reset the search input and after do the search and after this reorder again elements.In my opinion this can be a solution that can work. What do you think? is this possible ? – agis May 21 '13 at 14:32
  • 1
    @Alecs: I am unable to test your site properly with JSFiddle as it pulls down the JS files from your server and overwrites the test JS. The modification needed to go into filtercontent.js, but here it also ran only on **Search 1**. Looking into the social wall plugin, it barely calls isotope, except to add new items. Have you tried contacting the social plugin writers? – iCollect.it Ltd May 21 '13 at 14:45
  • I've added this but is not working, you can take a look [link](http://v2.letsplayibiza.com/elements/), I've asked the developers of the plugin also but they don't give any indications just asking for money to do this. I've found a similar question [here](http://stackoverflow.com/questions/6738327/resorting-isotope-elements-after-search) and I'm thinking to apply the same concept on my code but I don't know how can I make that in my code because there is used another search plugin. – agis May 22 '13 at 16:18
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');
});
r043v
  • 1,859
  • 1
  • 15
  • 25