javascript - Combined Isotope filtering (filter funtions, button filters and search)

Question

I am trying to use Isotope to show cards and filter them. I want the user to be able to filter using a combination of the search field and 3 different filters with toggleable options. 2 out of 3 toggleable filters work via the data-filter attribute passing the filter value to the jQuery script. the other toggleable filter uses the data-filter attribute to refer the script to a filter function.

I was able to get all 3 toggleable options to work using scripts I found online:

[https://codepen.io/flinch85/pen/bGdOQqv][1]
[https://codepen.io/desandro/pen/JEojz][2]
[https://isotope.metafizzy.co/filtering.html][3]

Now that I also got the search function to work the 1 toggleable option using the filter functions doesn't work anymore. And no matter what I try, I can not get it to work. I think my jQuery knowledge isn't suffient to combine the 2 scripts that I found. Maybe someone can push me in the right direction:

Option 1 using the functions to filter:

<a class="dropdown-item" href="#!" data-filter="max7daysago">Jonger dan 7 dagen</a>
<a class="dropdown-item" href="#!" data-filter="min7daysago">Ouder dan 7 dagen</a>
<a class="dropdown-item" href="#!" data-filter="min14daysago">Ouder dan 14 dagen</a>
<a class="dropdown-item" href="#!" data-filter="min30daysago">Ouder dan 30 dagen</a>

var filterFns = {
    max7daysago: function() {
        var number = $(this).data('daysago');
        return parseInt( number, 10 ) <= 7;
    },
    min7daysago: function() {
        var number = $(this).data('daysago');
        return parseInt( number, 10 ) > 7;
    },
    min14daysago: function() {
        var number = $(this).data('daysago');
        return parseInt( number, 10 ) > 14;
    },
    min30daysago: function() {
        var number = $(this).data('daysago');
        return parseInt( number, 10 ) > 30;
    }
};

Options 2 and 3 using a data-attribute to filter:

<a class="dropdown-item" href="#!" data-filter="[data-priority='high']">Hoog</a>
<a class="dropdown-item" href="#!" data-filter="[data-priority='low']">Laag</a>

$('.button-group').on('click', 'a', function() {
    var $this = $(this);
    var $buttonGroup = $this.parents('.button-group');
    var filterGroup = $buttonGroup.attr('data-filter-group');
    buttonFilters[ filterGroup ] = $this.attr('data-filter');
    buttonFilter = concatValues( buttonFilters );
    $grid.isotope();
});

And the search field:

<input autofocus class="form-control form-control-sm bg-light quicksearch" id="zoeken" type="text" placeholder="Zoek een onderwerp"/>

var $quicksearch = $('.quicksearch').keyup( debounce( function() {
    qsRegex = new RegExp( $quicksearch.val(), 'gi' );
    $grid.isotope();
}) );

Rest of the code:

    function debounce( fn, threshold ) {
    var timeout;
    threshold = threshold || 100;
    return function debounced() {
        clearTimeout( timeout );
        var args = arguments;
        var _this = this;
        function delayed() {
        fn.apply( _this, args );
        }
        timeout = setTimeout( delayed, threshold );
    };
}

function concatValues( obj ) {
    var value = '';
    for ( var prop in obj ) {
        value += obj[ prop ];
    }
    return value;
}


var buttonFilters = {};
var buttonFilter;
var qsRegex;

var $grid = $('.filter').isotope({
itemSelector: '.filter-item',
getSortData : {
    time : function () {
    return $('.filter-item').attr('data-date');
    }
},
sortBy : 'time',
sortAscending : true,
filter: function() {
    var $this = $(this);
    var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
    var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
    return searchResult && buttonResult;
}
});

question from:https://stackoverflow.com/questions/66056567/combined-isotope-filtering-filter-funtions-button-filters-and-search

Answer 1

Waitting for answers