>

태그 선택기에 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({
                // ... 
            });
        }
    });
    
    

    데모

    <시간>

    [편집]
    (작은 업데이트 : 아래의 @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

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

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

  • 이전 c++ - c ++ 11에서 string - : c_str ()으로 가리키는 배열의 문자를 변경할 수 있습니까?
  • 다음 regex - grep egrep 다중 문자열