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

/*
	- Actuellement le deuxieme filtre ne fonctionne pas à cause du second algo
  - Quand on remet en all il ne remet pas tout les <p>
*/

//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) {
    
      $(this).data('options', $('#2 option').clone());
    }
    var id = $(this).val();
    if( id == "" ){
    		var options = $(this).data('options').filter
    		$('#2').html(options);
    } else {
        var options = $(this).data('options').filter('[value=' + id + ']');
        $('#2').html(options);
    }
 });