Discussion :

[almoha]

Bonjour,

Je filtre une liste de résultats avec un formulaire. Avec le code suivant, j'affiche dans des span les filtres en cours extraits des différents champs de ce formulaire. Pour les selects, je récupère le text de l'option sélectionnée; pour les inputs, je récupère leur value. Dans chaque span, je donne, en outre, la possibilité de supprimer le filtre associé en réinitialisant la valeur du champ correspondant.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 var selects = $('.selcrit');
 var inputs = $('.inputcrit');
 var querysel  = new Object();
 var queryinp  = new Object();
$("#btSubmit").click(function(){ 
    $('#criteres').empty();
     selects.each(function(){
     var critere  = $(this).data("typefiltre");
     var value =  $(this).find("option:selected").text();
     querysel[critere] = value;
    });
    inputs.each(function(){
    var critere  = $(this).data("typefiltre");
    var value =  $(this).val();
    queryinp[critere] = value;
    });
    var addcrit = $.extend({}, queryinp, querysel);
     $.each(addcrit, function(key, element) {
         if(element !='Tous' && element != 'Toutes' && element != ''){
         var afficheCriteres  = ' '+key+' : '+element;
         $('#criteres').append('<span class="tagcrit"data-idcrit="'+key+'">'+afficheCriteres+
         '<sup class ="suppcrit" style="color: red;cursor: pointer;"> x </sup></span>');
         } 
      }); 
}); 
$(document).on("click",".tagcrit", function() {
    var idc = $(this).data("idcrit");
    $("[data-typefiltre='"+idc+"']").val('');
    $("[data-typefiltre='"+idc+"option[value='']").prop('selected', true);
    $(this).remove();
});

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<input type="text" data-typefiltre = "mot-clé(s)" id="mot-clé(s)" class="inputcrit"/>
<input type="text" data-typefiltre = "auteur" id="auteur" class="inputcrit"/>
<br/><br/>
<select  data-typefiltre = "éditeur" id="éditeur"class="selcrit">
<option value="">Tous</option>
<option value="1">Albin Michel</option>
<option value="2">Michel Lafon</option>
<option value="3">Sonatine</option>
</select>
<select  data-typefiltre = "librairie" id="librairie"class="selcrit">
<option value="">Toutes</option>
<option value="1">Fnac</option>
<option value="2">Richer</option>
<option value="3">Contact</option>
</select>
<br/><br/>
<input type="button" id="btSubmit" value="go"/>	
<br/><br/>
<span id="criteres"></span>

Mon code test est ici : http://jsfiddle.net/3p8Gv/7/
Il est fonctionnel mais je reste persuadé qu'il peut être optimisé. Le code actuel a d'ailleurs un inconvénient : il n'affiche pas les critères de filtre dans l'ordre dans lequel ils sont ajoutés après le clic.

Qu'en pensez-vous ? Merci.

[almoha]

Bonjour,

Avez-vous une idée sur mon sujet ? Merci.