How to filter results in jQuery with multiple selects, including a date range?

Question

I'm trying to filter results based on data attributes. For the most part I think I'm there (it works on the first 3 selectors), but I get into trouble trying to take the date selector into the equation. At this point I question of my approach is correct altogether - I can change HTML if required - so feel free to provide a better solution.

For the convenience of anyone willing to help here's the fiddle: https://jsfiddle.net/rnbx0c3j/

THANK YOU

Selectors:

HTML to be filtered

sectionID_1
sectionID_2
sectionID_3

JS

var $select = $('#stats_filter select');
var $statsSection = $('.stats-section');

$select.change(function () {
    var include = '';
    var exclude = [];
    var showAll = true;
    var filterDate = false;

    $select.each(function () {
        var val = $(this).children(':selected').val();

        if (val !== 'all') {

            switch ($(this).prop('id')) {
                case 'select-server':
                    include += "[data-server='" + val + "']";
                    break;
                case 'select-track':
                    include += "[data-track='" + val + "']";
                    break;
                case 'select-car':
                    include += "[data-car*='" + val + "']";
                    break;
                case 'select-date':
                    var selectedDate = new Date(new Date().setDate(new Date().getDate() - val));
                    var dd = selectedDate.getDate();
                    var mm = selectedDate.getMonth() + 1;
                    var yyyy = selectedDate.getFullYear();
                    if (dd < 10) {
                        dd = '0' + dd;
                    }
                    if (mm < 10) {
                        mm = '0' + mm;
                    }
                    selectedDate = dd + '/' + mm + '/' + yyyy;

                    //exclude when date is out of range
                    $statsSection.each(function () {
                        var sectionDate = $(this).data('date');

                        if (process(sectionDate) < process(selectedDate)) {
                            exclude.push("[data-date='" + sectionDate + "']");
                        }
                        exclude.join(',');

                    });

                    function process(date) {
                        var parts = date.split("/");
                        return new Date(parts[2], parts[1] - 1, parts[0]);
                    }

                    filterDate = true;
                    break;
            }
            showAll = false;
        }

    });

    if (showAll) {
        $statsSection.show();
    } else {


        //HOW TO DEAL WITH THE DATES??
                if (filterDate == true) {
            alert('the following dates should be excluded from the results: ' + exclude);
        }

        //this works for the non-date selectors
        $statsSection.not($(include)).hide();
        $statsSection.filter($(include)).show();
    }
});

Vanquished Wombat · Accepted Answer

So, for the non-date items your technique is to compute the jquery selector for elements that should be included, then apply that to the data divs.

Quite a nice approach in that you are constructing multiple jquery filters as you build up the 'include' variable.

The difficulty in applying the same technique for the dates is that this produces a range test which is hard to put into a jquery selector. My solution is to construct an array of qualifying data-date values and carry out a second filter in the final step.

The changes are:

Step 1. Define a new variable:

var dateInclude = [];

Step 2. In the section where you determine if the date is valid push the valid values into the dataInclude filters array

//exclude when date is out of range
$statsSection.each(function () {
    var sectionDate = $(this).data('date');

    if (process(sectionDate) > process(selectedDate)) {
        dateInclude.push("[data-date='" + sectionDate + "']");
    }

});

Step 3: In the output section we now combine the dateInclude as a second filter. Note that your initial filters operate as boolean AND, but the date filters have to operate as boolean OR's. Therefore the dateInclude filter is applied in the show() operation as a second step.

$statsSection.hide();
include = (dateInclude.length > 0 && include === '' ? '*' : include);
dateInclude = (dateInclude.length === 0 ? ['*'] : dateInclude );
$('#info').html(include + ' :: ' + dateInclude.join());
$statsSection.filter(include).filter(dateInclude.join()).show();

The first line (below) hides all the data divs pre-emptively.

$statsSection.hide();

The next lines (below) operate on the filters to ensure that they both have a value. If no date filters are present we inject a match-all, and same for the 'include' filters for the other select boxes.

include = (dateInclude.length > 0 && include === '' ? '*' : include);
dateInclude = (dateInclude.length === 0 ? ['*'] : dateInclude );

Finally we bring this together as below.

$statsSection.filter(include).filter(dateInclude.join()).show();

To help visualise it I added some output to the fiddle

For example, selecting server=NicNicFunGame and date=last six months produces filters:

$statsSection.filter("[data-server='NicNicFunGame']").filter("[data-date='27/09/2019'],[data-date='03/07/2019']").show();

See my working fiddle at https://jsfiddle.net/JamesE442/qktfbp15/38/

How to filter results in jQuery with multiple selects, including a date range?

Answers (2)

Related Questions