Select2 입력을 토큰으로 변환

Question

Select2 jQuery 플러그인에는 문자열을 토큰으로 변환하는 기능이 내장되어 있습니까?

붙여 넣기 된 입력이 토큰이되도록 사용자가 문자열을 Select2 필드에 붙여 넣을 때이 토큰 화 함수를 호출 할 수 있기를 원합니다.

Answer 1

은 내가 다음 코드로 질문을 자신을 해결 한 생각 :

// force tokenizing of Select2 auto-complete fields after pasting 
$('body').on('paste', '.select2-input', function() { 
    // append a delimiter and trigger an update 
    $(this).val(this.value + ',').trigger('input'); 
}); 

이 쉼표는 플러그인의 "tokenSeparators"초기화 설정에서 구분 기호로 설정되어 있다고 가정합니다.

Answer 2

입력 유형 텍스트를 사용하고 select2를 지정하십시오.

<input type="text" id="makeTokens" /> 

다음 태그

$("#makeTokens").select2({ 
    placeholder: "Paste data", 
    tags: ["red", "green", "blue"], 
    tokenSeparators: [",", " "] 
}); 

, 당신은 당신이 같은 선택 옵션을 표시하려면 원하는 값을 할당 등 쉼표 나 공백의 텍스트를 분리해서하는 tokenSeperators를 사용할 수있는 자바 스크립트처럼

참고 : 결과 입력 값은 쉼표로 구분됩니다.

Answer 3

Donald의 해결책이 나를 위해 작동하지 않았습니다 (아마도 새로운 버전의 select2가 다르게 작동합니다). 이것은 나를 위해 일한 것입니다 : 지점에서 이벤트가 .select2-input의 값을 트리거 이후

$('body').on('paste', '.select2-input', function (e) { 
    var pasteData = (e.originalEvent || e).clipboardData.getData('text/plain') || ''; 
    $(this).val(pasteData + ','); 
    e.preventDefault(); 
}); 

내가 이벤트 객체에서 붙여 넣은 문자열을 extractacted, 빈 문자열이다. 분명히 액션을 복사하기위한 기본 select2가 여전히이 후에 실행 중이기 때문에 e.preventDefault();을 추가하여 입력을 실행하고 엉망으로 만들지 않도록해야합니다.

Answer 4

바로 자동으로 페이지에있는 모든 선택 2 인스턴스에 대한 직접 options.tokenSeparators에서 separatoes 소요되며, 적용이 jQuery를 실행

$('#my-select').data('select2').dataAdapter.$search.val("tag1,tag2,").trigger("input"); 

이 부가됩니다

$(document).on('paste', 'span.select2', function (e) { 
    e.preventDefault(); 
    var select = $(e.target).closest('.select2').prev(); 
    var clipboard = (e.originalEvent || e).clipboardData.getData('text/plain'); 
    var createOption = function (value, selected) { 
     selected = typeof selected !== 'undefined' ? selected : true; 
     return $("<option></option>") 
      .attr("value", value) 
      .attr("selected", selected) 
      .text(value)[0] 
    }; 
    $.each(
     clipboard.split(new RegExp(select.data('select2').options.options.tokenSeparators.map(function (a) { 
      return (a).replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); 
     }).join('|'))), 
     function (key, value) { 
      if (value && (!select.val() || (select.val() && select.val().indexOf('' + value) == -1))) { 
       select.append(createOption(value)); 
      } 
     }); 
    select.trigger('change'); 
}); 

Answer 5

4.0.1 버전을 두 개의 태그 : tag1 및 tag2 (후행 ,에 유의하십시오).

중요 : select2 초기화 매개 변수에 data: []을 추가해야합니다.