Filtre multiple n'affiche que les valeurs d'un seul choix
Résolu/Fermé
achref07
-
Modifié le 2 janv. 2021 à 18:37
achrefBIG Messages postés 27 Date d'inscription samedi 2 janvier 2021 Statut Membre Dernière intervention 3 juin 2021 - 3 janv. 2021 à 00:35
achrefBIG Messages postés 27 Date d'inscription samedi 2 janvier 2021 Statut Membre Dernière intervention 3 juin 2021 - 3 janv. 2021 à 00:35
A voir également:
- Filtre multiple n'affiche que les valeurs d'un seul choix
- Photo filtre 7 gratuit - Télécharger - Retouche d'image
- Excel cellule choix multiple - Guide
- Le clavier de mon telephone ne s'affiche plus - Guide
- Filtre teams - Accueil - Visio
7 réponses
jordane45
Messages postés
38424
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 février 2025
4 734
2 janv. 2021 à 18:42
2 janv. 2021 à 18:42
Bonjour,
Commence par mettre un peu de debug et regarde dans la console ce que ça donne
Commence par mettre un peu de debug et regarde dans la console ce que ça donne
function FilterFunction(value, data){ console.log("value",value,"data",data); var filteredData = []; for(var i = 0; i < data.length; i++){ value = value.toLowerCase(); var facf_regcod_nospace = data[i].acf_regcod_nospace.toLowerCase(); console.log("facf_regcod_nospace",facf_regcod_nospace,"value",value); if(facf_regcod_nospace.includes(value)){ console.log("On rentre dans le if, on ajoute :",data[i]); filteredData.push(data[i]); }else{ console.log(" ELSE .. on n'ajoute pas la valeur :",data[i]); } } return filteredData; }
merci @jordane45 pour votre réponse. J'ai remarqué que dans la boucle qu'il prend toujours une seule valeur depuis les valeurs choisis dans le search txt.
jordane45
Messages postés
38424
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 février 2025
4 734
2 janv. 2021 à 20:48
2 janv. 2021 à 20:48
Faudrait que tu nous montre ton code complet et que tu as dit qu' aux a trouvé ton plugin select2
achrefBIG
Messages postés
27
Date d'inscription
samedi 2 janvier 2021
Statut
Membre
Dernière intervention
3 juin 2021
2 janv. 2021 à 20:49
2 janv. 2021 à 20:49
achrefBIG
Messages postés
27
Date d'inscription
samedi 2 janvier 2021
Statut
Membre
Dernière intervention
3 juin 2021
2 janv. 2021 à 20:51
2 janv. 2021 à 20:51
Voici un exemple, sachant que ici j'ai mis dans le search txt les deux premieres valeurs: f-gznu et f-hrbi
achrefBIG
Messages postés
27
Date d'inscription
samedi 2 janvier 2021
Statut
Membre
Dernière intervention
3 juin 2021
Modifié le 2 janv. 2021 à 22:19
Modifié le 2 janv. 2021 à 22:19
@jordane45 voici le reste de mon code
EDIT: Correction des balises de code. Ajout du LANGAGE
<!-- /.col --> <div class="col-md-6"> <div class="form-group"> <label>Multiple</label> <select id="txtSearch" name="keyword[NL][]" class="select2" multiple="multiple" data-placeholder="Select one or different values for AC" style="width: 100%;"> <option th:each="detail : ${faultDetails}" th:value="${detail.acf_regcod_nospace}" th:text="${detail.acf_regcod_nospace}"></option> </select> </div> </div> <div class="container-fluid"> <div class="row"> <div class="card"> <div class="card-header"> <h3 class="card-title">Open Fault Details</h3> </div> <div class="card-body" style="width: 98%; min-height: 400px; height: 400px; overflow: auto;"> <table id="detailsTable" class="table table-bordered table-hover"> <thead> <tr class="table-info"> <th>FLEET</th> <th>AC</th> <th>SEVERITY</th> <th>FAULT DEFERRALCLASS</th> <th>FAULT DEFERRALREF</th> <th>STATUS</th> <th>DUE EXT</th> <th>DUE</th> <th>FOUND DATE</th> <th>PARENT EVENT ID</th> <th>PARENT EVENT</th> </tr> </thead> <tbody> <tr th:each="detail : ${faultDetails}"> <td th:text="${detail.acf_fleet}">ACF FLEET</td> <td th:text="${detail.acf_regcod_nospace}">ACF_REGCOD_NOSPACE</td> <td th:text="${detail.fault_severity}">FAULT SEVERITY</td> <td th:text="${detail.fault_deferralclass}">FAULT DEFERRALCLASS</td> <td th:text="${detail.fault_deferralref}">FAULT DEFERRALREF</td> <td th:text="${detail.workscope_status}">STATUS</td> <td th:text="${detail.due_date_extend}">DUE_EXT</td> <td th:text="${detail.due_date}">DUE</td> <td th:text="${detail.fault_foundondate}">FOUND DATE</td> <td th:text="${detail.parent_event_id}">PARENT EVENT ID</td> <td th:text="${detail.parent_event}">PARENT EVENT</td> </tr> </tbody> </table> </div> </div>
EDIT: Correction des balises de code. Ajout du LANGAGE
jordane45
Messages postés
38424
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 février 2025
4 734
Modifié le 2 janv. 2021 à 22:27
Modifié le 2 janv. 2021 à 22:27
Je t'ai demandé où tu avais trouvé le plugin select2
https://select2.org/
Et donc, tu n'as pas bien dû regarder la documentation....
Ta façon de récupérer les valeurs sélectionnées
n'est pas celle de la doc
https://select2.org/programmatic-control/retrieving-selections
- Je suppose que c'est celui là
https://select2.org/
Et donc, tu n'as pas bien dû regarder la documentation....
Ta façon de récupérer les valeurs sélectionnées
var value = $("#txtSearch option:selected").val();
n'est pas celle de la doc
https://select2.org/programmatic-control/retrieving-selections
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
achrefBIG
Messages postés
27
Date d'inscription
samedi 2 janvier 2021
Statut
Membre
Dernière intervention
3 juin 2021
2 janv. 2021 à 22:46
2 janv. 2021 à 22:46
@jordane45 comment je peux rendre ça compatible avec mon code, parce que d'aprés ce que j'ai fait ça marche pas encore.
achrefBIG
Messages postés
27
Date d'inscription
samedi 2 janvier 2021
Statut
Membre
Dernière intervention
3 juin 2021
2 janv. 2021 à 22:50
2 janv. 2021 à 22:50
j'ai remplacé ces lignes
par cette ligne
Mais toujours n'affiche que les lignes qui correspondent à une seule valeur séléctionnée
$('#txtSearch').select2({
allowClear: true,
tags:true,
placeholder:'Select values ..',
closeOnSelect:false
});
par cette ligne
$('#txtSearch').select2('data');
Mais toujours n'affiche que les lignes qui correspondent à une seule valeur séléctionnée
jordane45
Messages postés
38424
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 février 2025
4 734
2 janv. 2021 à 23:04
2 janv. 2021 à 23:04
Tu fais n'importe quoi .....
Et puis.. une bonne foi pour toutes... pourrais tu utiliser correctement les BALISES DE CODE ( en y précisant le LANGAGE afin d'avoir la coloration syntaxique ?? )
Explications à lire ENTIEREMENT disponibles ici :
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Bref,
le code
Sert à initialiser le plugin.... il faut donc qu'il soit présent pour que ton select devienne un select2
Ensuite, dans la doc, il y a le code à utiliser pour RECUPERER les éléments selectionnés....
Si je t'ai indiqué la ligne de code qui n'était pas bonne chez toi, c'était pour que tu la remplaces par le bon code... pas que tu changes du code au pif n'importe où !
Donc.. LA LIGNE à modifier dans ton code c'est celle la:
A remplacer, très certainement, par :
Attention.. ici value contiendra LES éléments selectionnés... pas juste leur valeur... (ça te retourne un array avec tous les éléments choisis )
Donc, dans la suite de ton code, tu devras récupérer la valeur de chaque élément...(via une boucle )
Les console.log que je t'ai donné devraient te donner une idée de comment faire...
Et puis.. une bonne foi pour toutes... pourrais tu utiliser correctement les BALISES DE CODE ( en y précisant le LANGAGE afin d'avoir la coloration syntaxique ?? )
Explications à lire ENTIEREMENT disponibles ici :
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Bref,
le code
$('#txtSearch').select2({ allowClear: true, tags:true, placeholder:'Select values ..', closeOnSelect:false });
Sert à initialiser le plugin.... il faut donc qu'il soit présent pour que ton select devienne un select2
Ensuite, dans la doc, il y a le code à utiliser pour RECUPERER les éléments selectionnés....
Si je t'ai indiqué la ligne de code qui n'était pas bonne chez toi, c'était pour que tu la remplaces par le bon code... pas que tu changes du code au pif n'importe où !
Donc.. LA LIGNE à modifier dans ton code c'est celle la:
var value = $("#txtSearch option:selected").val();
A remplacer, très certainement, par :
var value =$('#txtSearch').select2('data');
Attention.. ici value contiendra LES éléments selectionnés... pas juste leur valeur... (ça te retourne un array avec tous les éléments choisis )
Donc, dans la suite de ton code, tu devras récupérer la valeur de chaque élément...(via une boucle )
Les console.log que je t'ai donné devraient te donner une idée de comment faire...
achrefBIG
Messages postés
27
Date d'inscription
samedi 2 janvier 2021
Statut
Membre
Dernière intervention
3 juin 2021
>
jordane45
Messages postés
38424
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 février 2025
2 janv. 2021 à 23:50
2 janv. 2021 à 23:50
@jordane 45 , j'ai fait comme ça mais toujours le même résultat, je comprends pas vraiment la source du problème.
$('#txtSearch').on('change', function(){ var value =$('#txtSearch').select2('data'); console.log("aa", value); console.log("v", value.length); for(var i =0; i<value.length; i++){ var v = value[i].text; console.log(v); var data = FilterFunction(v, faultDetails); rebuildTable(data) } });
jordane45
Messages postés
38424
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 février 2025
4 734
>
achrefBIG
Messages postés
27
Date d'inscription
samedi 2 janvier 2021
Statut
Membre
Dernière intervention
3 juin 2021
Modifié le 3 janv. 2021 à 00:42
Modifié le 3 janv. 2021 à 00:42
Il faut que ta boucle soit dans la fonction rebuildTable
sinon tu l'appelles pour chaque valeur et donc par conséquent tu ne gardes que la dernière de la liste
sinon tu l'appelles pour chaque valeur et donc par conséquent tu ne gardes que la dernière de la liste
achrefBIG
Messages postés
27
Date d'inscription
samedi 2 janvier 2021
Statut
Membre
Dernière intervention
3 juin 2021
3 janv. 2021 à 00:35
3 janv. 2021 à 00:35
C bon, ça marche maintenant. Je partage le code pour tous qui ont besoin:
<script th:inline="javascript"> /*<![CDATA[*/ var faultDetails = /*[[${faultDetails}]]*/""; /*]]>*/ function FilterFunction(value, data){ console.log("value",value,"data",data); var filteredData = []; for(var j =0; j<value.length; j++){ var v = value[j].text; var vi= v.toLowerCase(); console.log(v); for(var i = 0; i < data.length; i++){ var facf_regcod_nospace = data[i].acf_regcod_nospace.toLowerCase(); console.log("facf_regcod_nospace",facf_regcod_nospace,"value",value); if(facf_regcod_nospace.includes(vi)){ console.log("On rentre dans le if, on ajoute :",data[i]); filteredData.push(data[i]); }else{ console.log(" ELSE .. on n'ajoute pas la valeur :",data[i]); }}} return filteredData; } function rebuildTable(data){ var table = document.getElementById('detailsTable') table.innerHTML='' for(var i = 0; i <data.length; i++){ var row = `<tr> <td>${data[i].acf_fleet}</td> <td>${data[i].acf_regcod_nospace}</td> <td>${data[i].fault_severity}</td> </tr>` table.innerHTML += row }} $(document).ready(function() { $('#txtSearch').select2({ allowClear: true, tags:true, placeholder:'Select values ..', closeOnSelect:false }); $('#txtSearch').on('change', function(){ var value =$('#txtSearch').select2('data'); var data = FilterFunction(value, faultDetails); rebuildTable(data) }) }); </script>