jQuery Filtering Multiple Data Attributes

Question

I have a list of cars for sale on my site, and five filters:

1. Make
2. Model
3. Year
4. Mileage
5. Price

...each with multiple options that users can filter by.

When users check one or more options in the filter list, I need to hide the cars that don't match all of the selected filters.

Here's the HTML for one of the cars:

<div class="home-car-div">
    <div class="home-car-description-div">
        <p class="home-car-info" data-year="2018" data-make="Ford" data-model="Escape" data-mileage="10000" data-price="18900">
            2018 Ford Escape
        </p>
    </div>
</div>

And here is one of the filters:

<div class="car-filters">
    <div class="make-section">
        <p class="filter-title">Make</p>
        <div id="makeSection" data-group="make">
            <label class="filter-input">
                <input type="checkbox" name="make" class="make" value=“Ford”>Ford
            </label>
            <label class="filter-input">
                <input type="checkbox" name="make" class="make" value="Subaru"> Subaru
            </label>
        </div>
    </div>
</div>

I have followed some other questions on the site, and I seem to have most of this working. Whenever the user checks one of the filter checkboxes, I get all the values for each attribute in arrays of key/value pairs:

var $filterCheckboxes = $( '.filter-input input' );

$filterCheckboxes.on( 'change', function() {
        
    $('.home-car-div').show();
        
    var selectedFilters = {};
            
    $filterCheckboxes.filter( ':checked' ).each( function() {
        
        if ( ! selectedFilters.hasOwnProperty( this.name ) ) {
            selectedFilters[ this.name ] = [];
        }
            
        selectedFilters[ this.name ].push( this.value );
        
    });
          
    $('.home-car-info').each(function() {
        var carMake = $(this).data('make');
        var carModel = $(this).data('model');
        var carYear = $(this).data('year');
        var carPrice = $(this).data('price');
        var carMileage = $(this).data('mileage');
                    
        var filteredMake = selectedFilters.make;
        var filteredModel = selectedFilters.model;
        var filteredYear = selectedFilters.year;
        var filteredPrice = selectedFilters.price;
        var filteredMileage = selectedFilters.mileage;
                
    });
        
});

So now I have variables for each of the cars' attributes, and variables of each of the filtered selections, but I now need to compare each of these, and somehow hide cars that aren't matching ALL of the attributes.

I'd also like to show a message if there are no results.

Am I on the right track, and how do I do the filtering?

Answer 1

I believe that this is close to what you were after. I used functional programing to perform actions on categories of data instead of individual elements. Doesn't really adhere to this requirement: "hide cars that aren't matching ALL of the attributes", because that requirement doesn't make sense for mutually exclusive properties such as "make" and "model". Also removed some extraneous classes and used the "for" attribute on labels (see this).

The implementation depends the assumption that a car matches a category if nothing in that category is selected.

Note: There is an issue with JQuery that causes it's .data() method to be functionally different to the DOM's .dataset property, hence the use of this.dataset[category] instead of $(this).data(category). Technically this should also be better performance and is arguably more readable as well.

$(function() {
  $('#button').click(function() {
    // Create an map of category name to selected filters
    selectedFilters = $('.car-filters input:checked').get().reduce( function(a, c) { a[c.name] = (a[c.name] || []); a[c.name].push(c.value); return a }, {} )
  
    // filter the list of cars displayed
    match = 0
    unmatchedCars = $('.home-car-info').filter(function() {
      for (const category in selectedFilters) {
        // must match at least one in each category
        if (!selectedFilters[category].includes(this.dataset[category])) {
           console.log(`"${$(this).text().trim()}" does not match ${category} is in [${selectedFilters[category]}] (${category} is ${this.dataset[category]})`)
           return true
        }
        match++
      }
    });
    // do something with unmatchedCars
    unmatchedCars.hide()
    if (!match) {
      console.log("Nothing matches the selected filters")
    }        
  })
  $('#restore').click(function() {
    $('.home-car-info').show()
    $('input:checkbox').prop('checked', false)
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="home-car-div">
  <div class="home-car-description-div">
    <p class="home-car-info" data-year="2018" data-make="Ford" data-model="Escape" data-mileage="10000" data-price="18900">
      2018 Ford Escape
    </p>
    <p class="home-car-info" data-year="1998" data-make="Porsche" data-model="911" data-mileage="10000" data-price="72500">
      1998 Porsche 911
    </p>
  </div>
</div>
<form>
  <div class="car-filters">
    <div class="make-section">
      <p >Make</p>
      <div id="makeSection" data-group="make">
        <input type="checkbox" id="iaa" name="make" value="Ford"><label for="iaa">Ford</label>
        <input type="checkbox" id="iab" name="make" value="Subaru"><label for="iab">Subaru</label>
        <input type="checkbox" id="iab" name="make" value="Porsche"><label for="iac">Porsche</label>
      </div>
      <p >Model</p>
      <div id="makeSection" data-group="model">
        <input type="checkbox" id="iba" name="model" value="T"><label for="iba">T</label>
        <input type="checkbox" id="ibb" name="model" value="Escape"><label for="ibb">Escape</label>
        <input type="checkbox" id="ibb" name="model" value="911"><label for="ibc">911</label>
      </div>
    </div>
  </div>
  <div>
    <button id="button" type="button">Filter</button>
    <button id="restore" type="button">Restore</button>
  </div>
</form><br />