Discussion :

[splifferwolf]

Bonjour à tous,

Je viens vers vous car j'ai un soucis avec le plugin SELECT2, je m'explique

J'ai un formulaire très complexe, contenant notamment un select. lorsque je clic sur ce select j'ai un petit champs de recherche qui minimise la liste en fonction de ce que je tape, mais j'aimerais garder la valeur dans le cas où elle n'existe pas dans la liste, mais je ne sais pas du tout comment procéder.

Donc j'ai mon select qui contient les options suivante :

Code HTML :

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

1
2
3
4
5
<select name="itemliste" id="itemliste">
  <option>Item 1</option>
  <option>Item 2</option>
  <option>Item 3</option>
</select>

Le JS

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
// Si le plugin n'est pas inclus dans la source, on l'intègre et on exécute la fonction passée en callback
function LoadSelect2Script(callback){
    if (!$.fn.select2){
        $.getScript('skin/Default/plugins/select2/select2.min.js', callback);
    }
    else{
        if (callback && typeof(callback) === "function") {
	    callback();
        }
    }
}
 
/**
 * @fonction : oSelectForm
 * @void (void) : void
 * @descr : Applique le plugin select2 sur les DOM élément SELECT
**/ 
function oSelectForm(){
    $("select").select2();
 
}
 
$(document).ready(function(){
    /** Mise en forme des SELECT **/
    LoadSelect2Script(oSelectForm);
});

Jusque là tout se passe bien, et tout fonctionne, sauf que je voudrais garder une valeur qui n'existe pas dans les options du select, est-ce possible ?
exemple dans l'input de recherche je tape : Item 4, qui n'existe pas dans les option, est-il possible de garder quand même cette valeur et de la récupérer en tant que .val() pour la traiter automatiquement ?

Je ne sais pas si je suis très clair, n'hésitez pas à me poser vos question si vous en avez.
D'avance merci de votre participation.

Bien à vous

[Invité]

Bonjour,

ca m'a pris 3 secondes pour trouver : "select2 ajouter option"

• Dynamic option creation

[splifferwolf]

En effet, je viens de voir sur google, néanmoins cela concerne la version 4+
Je suis en select2 version 3 et je n'ai pas le choix que de garder cette version (obligation des supérieurs) qui me demande d'adapter en conséquence.

Quand je met :

Code :

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

1
2
 
$("select").select2({ tags: true });

Cela ne fonctionne pas évidemment et plus rien ne s'affiche.

Je dois donc trouver une astuce sans devoir passer à la version 4+

Bien à vous

[Invité]

• Select2 3.5.3

Ou alors ajouter un <input /> (en complément du <select>) ?

Je ne peux pas faire mieux.

[splifferwolf]

Après moulte péripétie j'ai obtenu un semblant de résulta ^^

J'ai donc modifier ma fonction qui initialise select2

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
32
33
 
/**
 * @fonction : oSelectForm
 * @void (void) : void
 * @descr : Applique le plugin select2 sur les DOM élément SELECT
**/ 
function oSelectForm(){
    // Variable de fonction contenant l'id du select ciblé (pratique dans le cas ou il y'aurais plusieurs select différent, ce qui est mon cas)
    var idEl;
    // Initialisation select2
    $('select').select2({
        // Format le retour du NoMatches
        formatNoMatches: function(term) {
            // Place l'id du select dans la variable global de fonction pour utilisation ultérieur
            idEl = $(this).context.id;
            /* Personalise le "no matches" en ajoutant un bouton + terme recherché */
            return '<a href="#" id="addNewOption" class="btn btn-default" data-value="'+term+'">+ '+term+'</a>';
        }
    }).parent().find('.select2-with-searchbox').on('click','#addNewOption',function(){
        // Récupère le terme à ajouter
        var newTerm = $(this).data('value');
        // Ajoute l'option avec le nouveau terme au select
        $('<option>'+newTerm+'</option>').appendTo("#"+idEl);
        // Déclare à select2 que l'option sélectionnée est celle nouvellement créée
        $("#"+idEl).select2('val',newTerm);
        // Ferme le select
        $("#"+idEl).select2('close');
 
        // A partir de là je peux faire ce que je veux de la valeur, je pense peut-être adapter la fonction afin de lui passer un callback ou autre
        // Mais pas pour tout de suite
 
    });
}

Avec ceci, si effectivement aucune option ne correspond à ma recherche, je clic sur le bouton qui apparaît et la nouvelle option est ajoutée correctement et est directement sélectionnée dans le select ciblé
dommage de devoir faire autant de chichi plutôt que de mettre à jour select2 vers la version 4+, je ne comprend vraiment pas pourquoi ils s'obstinent à rester sur une version obsolète, malgré mes arguments sur l'utilité de le faire....

Bref, sujet est donc résolu
Merci pour votre participation
Bonne journée