[jquery-select2] Select2 드롭 다운이지만 사용자가 새 값을 허용 하시겠습니까?

우수한 대답 에 의해 제공 @fmpwizard는 선택 2 3.5.2 이하 작동, 하지만 4.0.0에서 작동하지 않습니다 .

초창기부터 (이 질문만큼 빠르지는 않음) Select2는 사용자가 허용하는 경우 자신의 가치를 추가 할 수있는 “태그 지정”을 지원했습니다. 이것은 tags옵션을 통해 활성화 할 수 있으며 문서의 예제를 가지고 놀 수 있습니다 .

$("select").select2({
  tags: true
});

기본적으로 입력 한 검색어와 동일한 텍스트가있는 옵션이 생성됩니다. 특별한 방법으로 표시하려는 경우 사용되는 개체를 수정하거나 선택한 후 원격으로 개체를 만들 수 있습니다.

$("select").select2({
  tags: true,
  createTag: function (params) {
    return {
      id: params.term,
      text: params.term,
      newOption: true
    }
  }
});

select2:select이벤트 를 통해 전달 된 개체에서 쉽게 발견 할 수있는 플래그 역할을하는 것 외에도 추가 속성을 사용하면 결과에서 옵션을 약간 다르게 렌더링 할 수 있습니다. 따라서 옆 에 ” (new) ” 를 넣어 새 옵션이라는 사실을 시각적으로 알리고 싶다면 다음과 같이 할 수 있습니다.

$("select").select2({
  tags: true,
  createTag: function (params) {
    return {
      id: params.term,
      text: params.term,
      newOption: true
    }
  },
  templateResult: function (data) {
    var $result = $("<span></span>");

    $result.text(data.text);

    if (data.newOption) {
      $result.append(" <em>(new)</em>");
    }

    return $result;
  }
});

답변

<input type='hidden' id='tags' style='width:300px'/>

$("#tags").select2({
    createSearchChoice:function(term, data) {
        if ($(data).filter(function() {
            return this.text.localeCompare(term)===0;
        }).length===0)
        {return {id:term, text:term};}
    },
    multiple: false,
    data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});

tags: true

//Allow manually entered text in drop down.
createSearchChoice:function(term, data) {
  if ( $(data).filter( function() {
    return term.localeCompare(this.text)===0; //even if the this.text is undefined it works
  }).length===0) {
    return {id:term, text:term};
  }
},

//solution to this error: Uncaught TypeError: Cannot read property 'localeCompare' of undefined