web-dev-qa-db-fra.com

Select2 Event pour créer une nouvelle balise

J'utilise le plugin jQuery Select2 (v4) pour un sélecteur de balises.

Je souhaite écouter le moment où une nouvelle balise est créée dans l'élément select et lancer une requête ajax pour stocker la nouvelle balise. J'ai découvert qu'il y a l'événement createTag, mais il semble se déclencher chaque fois qu'une lettre est entrée dans l'élément select2. Comme indiqué dans mon violon: http://jsfiddle.net/3qkgagwk/1/

Existe-t-il un événement similaire qui ne se déclenche que lorsque la nouvelle étiquette a été entrée? C'est à dire. il est entouré d'une boîte grise.

javascriptjqueryjquery-select2
13
harryg

Malheureusement, je ne trouve aucune méthode native. Mais si vous êtes intéressé par de simples "solutions de contournement", peut-être que cela vous rapproche:

$('.select2').select2({
    tags: true,
    tokenSeparators: [",", " "],
    createTag: function (tag) {
        return {
            id: tag.term,
            text: tag.term,
            // add indicator:
            isNew : true
        };
    }
}).on("select2:select", function(e) {
    if(e.params.data.isNew){
        // append the new option element prenamently:
        $(this).find('[value="'+e.params.data.id+'"]').replaceWith('<option selected value="'+e.params.data.id+'">'+e.params.data.text+'</option>');
        // store the new tag:
        $.ajax({
            // ... 
        });
    }
});

D&EACUTE;MO

[MODIFIER]
(Petite mise à jour: voir @Alex commentaire ci-dessous)

Ce qui précède ne fonctionnera que si la balise est ajoutée avec la souris. Pour les tags ajoutés en appuyant sur espace ou virgule, utilisez l'événement change. 

Ensuite, vous pouvez filtrer option avec l'attribut data-select2-tag="true" (nouvelle balise ajoutée):

$('.select2').select2({
    tags: true,
    tokenSeparators: [",", " "]
}).on("change", function(e) {
    var isNew = $(this).find('[data-select2-tag="true"]');
    if(isNew.length && $.inArray(isNew.val(), $(this).val()) !== -1){
        isNew.replaceWith('<option selected value="'+isNew.val()+'">'+isNew.val()+'</option>');
        $.ajax({
            // ... store tag ...
        });
    }
});

DEMO 2

29
Artur Filipiak

Une autre solution de contournement. Il suffit de l'insérer au début:

           }).on('select2:selecting', function (evt) {

             var stringOriginal = (function (value) {
                // creation of new tag
                if (!_.isString(value)) {
                    return  value.html();
                }
                // picking existing
                return value;
            })(evt.params.args.data.text);
            ........

Il s'appuie sur underscore.js pour vérifier si c'est une chaîne ou non. Vous pouvez remplacer la méthode _.isString par ce que vous voulez.

Il utilise le fait que lorsqu'un nouveau terme est créé, il est toujours un objet.

0
Tebe