https://e-quadra.com/Composant/MultiSelect/MultiSelect.js

1$(document).ready(function () {
2    $(".SelectMobilite").select2({
3        ajax:
4        {
5            url: '/Composant/MultiSelect/MultiSelectSource.asmx/GetData',
6            type: "POST",
7            dataType: "json",
8            data: function (params) {
9                var obj;
10                //si l'utilisateur prends le focus sans faire de recherche on passe vide en param
11                if (!params.term)
12                {
13                    obj = {
14                        _strSearchingText: "",
15                        _strFrom: 'mobilite'
16                    };
17                }
18                else
19                {
20                    obj = {
21                        _strSearchingText: params.term,
22                        _strFrom: 'mobilite'
23                    };
24                }
25
26                return JSON.stringify(obj);
27            },
28            contentType: "application/json; charset=utf-8",
29            processResults: function (data) {
30                return {
31                    results: JSON.parse(data.d)
32                };
33            }
34        },
35        delay: 500,
36        placeholder: "Sélectionnez votre mobilité *",
37        templateResult: TemplateResult,
38        allowClear: true,
39        language: "fr"
40    });
41
42    $(".SelectMetier").select2({
43        ajax:
44        {
45            url: '/Composant/MultiSelect/MultiSelectSource.asmx/GetData',
46            type: "POST",
47            dataType: "json",
48            data: function (params) {
49                var obj;
50                //si l'utilisateur prends le focus sans faire de recherche on passe vide en param
51                if (!params.term) {
52                    obj = {
53                        _strSearchingText: "",
54                        _strFrom: 'metier'
55                    };
56                }
57                else {
58                    obj = {
59                        _strSearchingText: params.term,
60                        _strFrom: 'metier'
61                    };
62                }
63
64                return JSON.stringify(obj);
65            },
66            contentType: "application/json; charset=utf-8",
67            processResults: function (data) {
68                return {
69                    results: JSON.parse(data.d)
70                };
71            }
72        },
73        delay: 500,
74        placeholder: "Sélectionnez vos métiers *",
75        templateResult: TemplateResult,
76        allowClear: true,
77        language: "fr"
78    });
79
80    //Event sur la selection ou la suppression d'un élément
81    $(".SelectMobilite").on("select2:select", function (e) { log("Add", e, "tbHideValueMobiliteViaSelect"); });
82    $(".SelectMobilite").on("select2:unselect", function (e) { log("Remove", e, "tbHideValueMobiliteViaSelect"); });
83
84    $(".SelectMetier").on("select2:select", function (e) { log("Add", e, "tbHideValueMetierViaSelect"); });
85    $(".SelectMetier").on("select2:unselect", function (e) { log("Remove", e, "tbHideValueMetierViaSelect"); });
86        
87    function TemplateResult(result) {
88        //Ne pas retirer, je pense que le composant à un élément nécessaire à son fonctionnement qui est caché
89        if (!result.id) {
90            return result.text;
91        }
92
93        //Si c'est un parent on va le mettre en gras
94        if (result.id.substring(0,2) === "p:") {
95            var $parent = $('<span style="font-weight: bold">' + result.text + '</span>');
96            return $parent;
97        }
98        else {
99            //Si c'est enfant on décale sur la gauche
100            var $enfant = $('<span style="margin-left: 10px">' + result.text + '</span>');
101            return $enfant;
102        }
103    }
104
105    function log(name, evt, hideLabel) {
106        //vérification de l'événement
107        var args;
108        if (!evt) {
109            args = "{}";
110        } else {
111            args = evt.params.data.id;
112        }
113
114        var label = $("#" + hideLabel);
115
116        switch (name) {
117            case "Add":
118                if (label.val() === "") {
119                    label.val(args);
120                }
121                else {
122                    label.val(label.val() + "," + args);
123                }
124                break;
125            case "Remove":
126                if (label.val().indexOf("," + args) > -1) {
127                    label.val(label.val().replace("," + args, ""));
128                }
129                else {
130                    label.val(label.val().replace(args, ""));
131                }
132
133                if (label.val().charAt(0) === ",") {
134                    label.val(label.val().substring(1));
135                }
136                break;
137        }
138    }
139});
140
141//Permet d'ajouter une option pour sélectionner le tout, utile dans le cadre de l'espace perso par exemple
142function addOption(id, text, component) {
143    var newOption = new Option(text, id, true, true);
144    $("." + component).append(newOption).trigger('change');
145}
146
147function modifPlaceholder() {
148    //// change placeholder in select2
149    $('.SelectMobilite').data('placeholder', 'Localisation géographique du poste à pourvoir *');
150}