javascript - 새 태그 생성을위한 Select2 이벤트

안타깝게도네이티브방법을 찾을 수 없습니다. 그러나 간단한 "해결 방법"에 관심이 있다면 더 가까이 다가 갈 수 있습니다.

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

데모

<시간>

[편집]
(작은 업데이트 : 아래의 @Alex 주석 참조)

위는 태그가 마우스로 추가 된 경우에만 작동합니다.공백또는쉼표를 눌러 추가 한 태그의 경우 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 && $.inArray(isNew.val(), $(this).val()) !== -1){
        isNew.replaceWith('<option selected value="'+isNew.val()+'">'+isNew.val()+'</option>');
        $.ajax({
            // ... store tag ...
        });
    }
});

DEMO 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 메소드를 원하는대로 바꿀 수 있습니다.

새 용어가 만들어 질 때 항상 개체라는 사실을 사용합니다.