Filtrer intelligent

by Florian Chrétien

HTML

<div class="status"></div>
<div id="filterDiv">

  <select class="mySel" id="1">
    <!--<option value="">All</option>-->
    <option value="f">Fruit</option>
    <option value="l">Légume</option>
    <option value="v">Vêtement</option>
  </select>

  <select class="mySel" id="2">
    <!--<option value="">All</option>-->
    <option value="f">Raisin</option>
    <option value="l">Navet</option>
    <option value="f">Cerise</option>
    <option value="v">Calecon</option>
    <option value="v">Chaussette</option>
    <option value="l">Haricot vert</option>
  </select>

</div>
<p class="p f" data-a="f" data-b="f" >raisin bio</p>
<p class="p f" data-a="f" data-b="f">raisin lidl</p>
<p class="p f" data-a="f" data-b="f">cerise France</p>
<p class="p f" data-a="f" data-b="f">cerise Espagne</p>
<p class="p l" data-a="l" data-b="l">Navet violet</p>
<p class="p l" data-a="l" data-b="l">Haricot 500g</p>
<p class="p l" data-a="l" data-b="l" >Navet Vert</p>
<p class="p l" data-a="l" data-b="l">Haricot vert 200g</p>
<p class="p v" data-a="v" data-b="v">Chaussette puma</p>
<p class="p v" data-a="v" data-b="v">Calecon Blanc</p>
<p class="p v" data-a="v" data-b="v">Calecon Noir</p>
<p class="p v" data-a="v" data-b="v">Chaussette athena</p>

CSS

.mySel {
  width: 100px;
  padding: 10px;
}

p {
  padding: 30px;
  background-color: grey;
  color: white;
  font-weight: 700;
}

.f {
  border: 4px solid blue;
}

.l {
  border: 4px solid green;
}

.v {
  border: 4px solid brown;
}

JavaScript

//Permet de filtrer les élements p en fonction des deux select
$('#filterDiv').on("change keyup", function() {
  
  $("p").hide().filter(function() {
    var rtnData = "";

    regExA 			= new RegExp($('#1').val().trim(), "ig");
    regExB 			= new RegExp($('#2').val().trim(), "ig");
    
		rtnData = (
     $(this).attr("data-a").match(regExA) && 
     $(this).attr("data-b").match(regExB) 
    );
     
    return rtnData;
  }).show();
});


//Permet de modifier le second select en fonction du premier
 $("#1").change(function() {
    if ($(this).data('options') == undefined) {
      /*Taking an array of all options-2 and kind of embedding it on the select1*/
      $(this).data('options', $('#2 option').clone());
    }
    var id = $(this).val();
    var options = $(this).data('options').filter('[value=' + id + ']');
    $('#2').html(options);
 });