Jquery advanced filtering of elements

Question

I have a large list of elements with data attributes.

<ul>
   <li data-brandid="1" data-finishid="5" data-typeid="10" data-constructionid="14">
   <li data-brandid="4" data-finishid="1" data-typeid="3" data-constructionid="7">
   <li data-brandid="18" data-finishid="2" data-typeid="1" data-constructionid="4">
   <li data-brandid="7" data-finishid="4" data-typeid="4" data-constructionid="5">
   <li data-brandid="4" data-finishid="8" data-typeid="1" data-constructionid="2">
   <li data-brandid="2" data-finishid="12" data-typeid="2" data-constructionid="16">
</ul>

At the top of the page, I have a form with checkboxes for each option for each attribute. They can select multiple options for each data attribute. So, for example, if they selected brandsid's 2 and 5, finishid's 1 and 4, typeid's 4 and 2 and constructionid's 1 and 14 the pseudocode(SQL style) would look something like this:

AND (brandid = 2 OR brandid = 5)
AND (finishid = 1 OR finishid = 4)
AND (typeid = 4 OR typeid= 2)
AND (constructionid = 1 OR 14)

But I'm not sure how to turn this into a jquery selector.

Thanks.

Answer 1

You can use patterns in jQuery like this -

$('li[data-brandid^=1][data-finishid^=5]')

Which looks for those attributes consisting of 1 and 5 correspondingly.

Here is a code snippet you could use -

var choose = function(brandId, finishId, typeid, constructionid){
  // Search through brandid and finishid
  var sel = $('li[data-brandid^=' + brandId + '][data-finishid^='+ finishId +'][data-typeid^='+ typeid +'][data-constructionid^='+ constructionid +']')
  $('div').append(sel);
};

$('#go').on('click', function(){  
  var brandIds = [];
  var constructionIds = [];
  var typeIds = [];
  var finishIds = [];
  
  if($('#brandid').val().indexOf(',') != -1)
    brandIds = $('#brandid').val().split(',');
  
  if($('#finishid').val().indexOf(',') != -1)
    finishIds = $('#finishid').val().split(',');
  
  if($('#typeid').val().indexOf(',') != -1)
    typeIds = $('#typeid').val().split(',');
  
  if($('#constructionid').val().indexOf(',') != -1)
    constructionIds = $('#constructionid').val().split(',');
  
  
      
  $.each(brandIds, function(brInd, brand){
    $.each(finishIds, function(finId, finish){
      $.each(typeIds, function(typeId, type){
        $.each(constructionIds, function(conId, construction){
          choose(brand, finish, type, construction);
        });
      });          
    });    
  });  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Brand ID <input type="text" id="brandid" />
Finish ID <input type="text" id="finishid" />
Type ID <input type="text" id="typeid" />
Construction ID <input type="text" id="constructionid">

<button id="go">Go!</button>
<br/><br/>

Available (Brand - Finish - Type - Construction)
<ul>
  <li data-brandid="1" data-finishid="5" data-typeid="10" data-constructionid="14">1 - 5 - 10 - 14</li>
  <li data-brandid="4" data-finishid="1" data-typeid="3" data-constructionid="7">4 - 1 - 3 - 7</li>
  <li data-brandid="18" data-finishid="2" data-typeid="1" data-constructionid="4">18 - 2 - 1 - 4</li>
  <li data-brandid="7" data-finishid="4" data-typeid="4" data-constructionid="5">7 - 4 - 4 - 5</li>
  <li data-brandid="4" data-finishid="8" data-typeid="1" data-constructionid="2">4 - 8 - 1 - 2</li>
  <li data-brandid="2" data-finishid="12" data-typeid="2" data-constructionid="16">2 - 12 - 2 - 16</li>
</ul>

Selected (Brand - Finish - Type - Construction)
<div id="selected"></div>

EDIT: For multiple values, using a $.each

Answer 2

I just wrote a filter like this and its actually quite easy if you know how to start.

We assume that every active filter has a class="active". We furthermore assume that every checkbox has a data-attribute which holds the name of the filter (e.g. data-filter="brandid" and a data-attribute which holds the value which should be selected (e.g. data-value="1").

This assumed we can start building the function

$items = $('li');

// Whenever a user changes a checkbox we want to filter our data
$('input[type="checkbox"]').change(function(){

    // We toggle the active-class to dis/enable our filter
    $(this).toggleClass('active');

    // We need an object holding our filters
    var filter = {};
    var $filtered = $items;

    // We select all active filter here and push them to the array
    $('input[type="checkbox"].active').each(function(){

        // When a filter with this type didnt exists in our object we create a new one
        if(filters[$(this).data('filter')] === undefined) filters[$(this).data('filter')] = {};

        // Then we push the filter to our array
        filters[$(this).data('filter')].push($(this).data('value'));

    });

    // We loop through every filter, select all elements which match the
    // filter and apply it to the $filtered selection
    // The items left is the desired collection
    for(var i in filters){

        // For every filter in our object
        // (which can hold multiple filters of one type)
        // we build a selector.
        // We join the selectors using `,` to get an `or`-selection
        selector = filters[i].map(function(value){
            return '[data-'+i+'="'+value+'"]';
        }).join(',');

        // Apply the filter
        $filtered = $filtered.filter(selector);
    }

    // $filtered now holds all elemets left
    // do with this elements what you want

}