Select2 Event для создания нового тега

Я использую плагин jQuery Select2 (v4) для селектора тегов.

Я хочу слушать, когда новый тэг создается в элементе select и запускает ajax-запрос для хранения нового тега. Я обнаружил, что есть событие createTag, но это, похоже, срабатывает каждый раз, когда буква вводится в элемент select2. Как показано в моей скрипке: http://jsfiddle.net/3qkgagwk/1/

Есть ли подобное событие, которое срабатывает только при завершении ввода нового тега? То есть он окружен серым ящиком, заключенным в него.

Ответ 1

К сожалению, я не могу найти какой-либо родной метод. Но если вас интересуют простые "обходные пути", возможно, это поможет вам ближе:

$('.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({
            // ... 
        });
    }
});

DEMO

[EDIT]

Вышеуказанное будет работать только при добавлении тега с помощью мыши. Для тегов, добавленных пробелом или запятой, используйте событие change.

Затем вы можете фильтровать option с помощью атрибута data-select2-tag="true" (новый добавленный тег):

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

DEMO 2

Ответ 2

Другой способ обхода. Просто вставьте его в начало:

           }).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);
            ........

Он полагается на underscore.js для проверки того, является ли строка строкой или нет. Вы можете заменить метод _.isString тем, что вам нравится.

Он использует тот факт, что при создании нового термина он всегда является объектом.