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

값 세트가있는 드롭 다운을 원하지만 사용자가 여기에 나열되지 않은 새 값을 "선택"할 수 있도록합니다.

나는 것을 알 선택 2는 당신이 그것을 사용하는 경우이 지원 tags모드하지만 태그를 사용하지 않고 할 수있는 방법이 있나요?

버전 4 이상의 경우 Kevin Brown의 아래 답변을 확인하십시오.

Select2 3.5.2 이하에서는 다음과 같이 사용할 수 있습니다.

$(selector).select2({
  minimumInputLength:1,
  "ajax": {
    data:function (term, page) {
      return { term:term, page:page };
    },
    dataType:"json",
    quietMillis:100,
    results: function (data, page) {
      return {results: data.results};
    },
    "url": url
  },
  id: function(object) {
    return object.text;
  },
  //Allow manually entered text in drop down.
  createSearchChoice:function(term, data) {
    if ( $(data).filter( function() {
      return this.text.localeCompare(term)===0;
    }).length===0) {
      return {id:term, text:term};
    }
  },
});

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

코드를 유지하기 위해 그의 의견 에서 @rrauenza Fiddle의 코드 를 게시 하고 있습니다.

HTML

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

jQuery

$("#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'}]
});

이러한 답변 중 많은 부분이 4.0 이상에서 작동하지 않기 때문에 ajax를 사용하는 경우 서버가 새 값을 옵션으로 추가하도록 할 수 있습니다. 따라서 다음과 같이 작동합니다.

1. 사용자가 값을 검색 (서버에 ajax 요청)
2. 가치가 큰 경우 옵션을 반환하십시오. 서버가 다음과 같은 옵션을 추가하지 않으면 :[{"text":" my NEW option)","id":"0"}]
3. 양식이 제출되면 해당 옵션이 db에 있는지 확인하고 저장하기 전에 작성하지 않았는지 확인하십시오.

지금 생각하는 더 나은 해결책이 있습니다

단순히 선택 옵션에서 태그를 true로 설정 하시겠습니까?

tags: true

에서 https://select2.org/tagging

@fmpwizard 답변에 대한 개선 :

//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

나는 방금 Kevin Brown으로부터 이것을 우연히 발견했습니다. https://stackoverflow.com/a/30019966/112680

당신이해야 할 모든 v4.0.6사용입니다 tags: true매개 변수입니다.

var text = 'New York Mills';
var term = 'new york mills';
return text.localeCompare(term)===0;

대부분의 경우 값을 민감하지 않은 레지스터와 비교해야합니다. 그리고이 코드는 false를 반환하여 데이터베이스에 중복 레코드를 생성합니다. 또한 String.prototype.localeCompare ()는 브라우저 Safary에서 지원되지 않으며이 코드는이 브라우저에서 작동하지 않습니다.

return this.text.localeCompare(term)===0;

더 나은 대체 할 것입니다

return this.text.toLowerCase() === term.toLowerCase();

도움을 주신 분들께 감사 드리며, Codeigniter II 내에서 아래 코드를 사용하고 있습니다 : 3.5.2 of select2.

var results = [];
var location_url = <?php echo json_encode(site_url('job/location')); ?>;
$('.location_select').select2({
    ajax: {
        url: location_url,
        dataType: 'json',
        quietMillis: 100,
        data: function (term) {
            return {
                term: term
            };
        },
        results: function (data) {
            results = [];
            $.each(data, function(index, item){
                results.push({
                    id: item.location_id,
                    text: item.location_name
                });
            });
            return {
                results: results
            };
        }
    },
    //Allow manually entered text in drop down.
    createSearchChoice:function(term, results) {
        if ($(results).filter( function() {
            return term.localeCompare(this.text)===0; 
        }).length===0) {
            return {id:term, text:term + ' [New]'};
        }
    },
});