Multi-filtering: Tiles arrangement not working after jquery "keyup"

[federicomarcantognini]

Hi, I am implementing multiple filter and sorting checkbox menus for Freewall, a sort of simultaneous filtering menu for a portfolio. Specifically for a text-based filtering, using the jquery keyup function, the filtered tiles (the ones not hidden) are returned in the original position and not re-arranged to the top.

Similar issue to this (https://github.com/kombai/freewall/issues/129) and this (https://github.com/kombai/freewall/issues/13), so I tried to include also the suggested "wall.reset", but without success. Here the code I am playing around:

    wall.reset({
        $('#box').keyup(function(){
            var valThis = $(this).val().toLowerCase();
            var noresult = 0;
            if(valThis == ""){
                $('#showcase').find('>li').show();
                noresult = 1;
                $('.no-results-found').remove();
            } else {
                $('#showcase').find('>li').each(function(){
                    var text = $(this).text().toLowerCase();
                    var match = text.indexOf(valThis);
                    if (match >= 0) {
                        $(this).show();
                        noresult = 1;
                        $('.no-results-found').remove();
                    } else {
                        $(this).hide();
                    }
                });
            };
            if (noresult == 0) {
                $('#showcase').append('<li class="no-results-found">No results found.</li>');
            }
        });
        console.log(this)
    });

Any advise? thanks and sorry for my poor js knowledge. fede

[federicomarcantognini]

Hi, anyone facing the same issue or just available to help me figuring this out? here an update of the live search filtering (user side) using jquery keyup function, the following code filters properly those tiles matching the letters while typing, however the matching tiles do not re-arrange to the top of their container (#showcase).

$(function() {
    var wall = new freewall("#showcase");
    wall.reset({
        selector: '.brick',
        animate: true,
        cellW: 20,
        cellH: 200,
        gutterY: 2,
        gutterX: 2,
        onResize: function() {
            wall.fitWidth();
        }
    });
    wall.addCustomEvent('onBlockLoad', function(setting){
        console.log(setting);
    });

    // jquery live search (filtering as user type)
    $('#box').keyup(function(){
        var valThis = $(this).val().toLowerCase();
        var noresult = 0;
        if(valThis == ""){
            $('#showcase').find('>li').show();
            noresult = 1;
            $('.no-results-found').hide();
        } else {
            $('#showcase').find('>li').each(function(){
                var text = $(this).text().toLowerCase();
                var match = text.indexOf(valThis);
                if (match >= 0) {
                    $(this).show();
                    noresult = 1;
                    $('.no-results-found').remove();
                    wall.unFilter();
                } else {
                    $(this).hide();
                }
            });
            wall.reset();
        }
        if (noresult == 0) {
            $("#showcase").append('<li class="no-results-found">No results found.</li>');
        }
        wall.reset();
    });

    wall.fitWidth();
    $(window).trigger("resize");
});

Should be something very simple, but I can't sort this out. Any help would be much appreciated. thank you

[kombai]

Hi, you can try with this way here:

$('#box').keyup(function() {
  var val = $(this).val().toLowerCase();

  wall.reset({
    selector: '.brick',
    onBlockReady: function(block, setting) {
       var text = $(this).text().toLowerCase();
       if (text.indexOf(val) != -1) {

          //show block;
          $(this).data('active', 1);

       } else {
             // hide block;
             $(this).data('active', 0);

       }
   }

  });

});

onBlockRead:

https://github.com/kombai/freewall/blob/master/freewall.js#L164

https://github.com/kombai/freewall/blob/master/freewall.js#L1062

[federicomarcantognini]

Hi Minh, thank you for your help - now it works!! I had to remove the following code after the freewall reset, in order to get the keyup function working:

wall.addCustomEvent('onBlockLoad', function(setting){
    console.log(setting);
});

Hope it will help someone else as well. best