Is it possible to reposition jQuery Masonry-"bricks" when using jQuery Quicksearch?

Question

I display my results in jQuery Masonry style (http://masonry.desandro.com/) together with jQuery Quicksearch (https://github.com/DeuxHuitHuit/quicksearch).
When I do a search, the not matching "bricks" gets removed/hidden - which is correct. But the remaining, matching, "bricks" are spread all around the page because they're locked in a spesific position.

I know Masonry are able to reposition the "bricks" when you resize the browser window width, so my first idea was to just do +1px and -1px to kind of trigger this effect by adding something to the Quicksearch onAfter-option: - like so:

onAfter: function (){
    window.resizeBy(101,0);
}

just to check if I could manage to change the window size, but this didn't work at all.

Anyone done anything similar?
- or, is there a way to reposition the Masonry-"bricks" after an event, like on keyUp or something?

Answer 1

Try using the following, it worked for me except for one thing (further below):

jQuery('input#inputfinderid').quicksearch('#content-block .item-to-search',
                {
                'delay': 200,

                'show': function () {
                //show parent of the items found
                    jQuery(this).parent().show();
                },
                'hide': function () {
                //hide parent of the items not found
                    jQuery(this).parent().hide();
                },


                'onAfter': function () {
                    if (jQuery('input#inputfinderid').val()) {
                        //hide parent as you type
                        jQuery(this).parent().parent().hide();

                    } else {
                //show parent as you type
                        jQuery(this).parent().parent().show();
                    }
                    //re-sort masonry objects
                    jQuery('.js-masonry').masonry('layout');                        
                }
            });

The only trouble I'm having is that sometimes the layout won't adjust properly and if I have 3 columns, it'll create 3 rows with 1 column/item in each. Yet sometimes it'll properly display all 3 items in 1 row.

Can anyone assist with that?