Select2 açılır menüsü ancak kullanıcı tarafından yeni değerlere izin verilsin mi?

Bir dizi değer içeren bir açılır listeye sahip olmak ama aynı zamanda kullanıcının orada listelenmeyen yeni bir değeri "seçmesine" izin vermek istiyorum.

Mode'da kullanıyorsanız select2'nin bunu desteklediğini görüyorum tags, ancak bunu etiketleri kullanmadan yapmanın bir yolu var mı?

4+ sürümü için aşağıdaki yanıtı Kevin Brown tarafından kontrol edin

Select2 3.5.2 ve altında, aşağıdaki gibi bir şey kullanabilirsiniz:

$(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 posta listesindeki bir cevaptan alınmıştır, ancak şu anda bağlantıyı bulamıyorum)

Mükemmel cevap sağladığı @fmpwizard 2'yi Seç 3.5.2 ve aşağıdaki için çalışır, ancak 4.0.0 iş olmaz .

Çok erken bir zamandan beri (ama belki de bu soru kadar erken değil), Select2 "etiketlemeyi" desteklemiştir: izin verirseniz kullanıcıların kendi değerlerini ekleyebilecekleri. Bu, tagsseçenek aracılığıyla etkinleştirilebilir ve belgelerdeki bir örnekle oynayabilirsiniz .

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

Varsayılan olarak, bu, girdikleri arama terimiyle aynı metne sahip bir seçenek oluşturacaktır. Özel bir şekilde işaretlemek istiyorsanız, kullanılan nesneyi değiştirebilir veya nesneyi seçildikten sonra uzaktan oluşturabilirsiniz.

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

select2:selectEkstra özellik , olay aracılığıyla iletilen nesne üzerinde kolayca tespit edilebilen bir bayrak görevi görmesine ek olarak, seçeneği sonuçta biraz farklı şekilde oluşturmanıza da olanak tanır. Dolayısıyla, bunun yeni bir seçenek olduğu gerçeğini, yanına " (yeni) " koyarak görsel olarak belirtmek isterseniz, bunun gibi bir şey yapabilirsiniz.

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

Sadece hayatta kodunu tutmak uğruna, ben ilanı olduğum Fiddle koduna @rrauenza gelen onun comment .

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'}]
});

Bu yanıtların çoğu 4.0+ sürümünde çalışmadığından, ajax kullanıyorsanız, sunucunun yeni değeri bir seçenek olarak eklemesini sağlayabilirsiniz. Yani şu şekilde çalışır:

1. Kullanıcı değer arar (bu, sunucuya ajax isteği yapar)
2. Değer harika bulunursa seçeneği iade edin. Sunucunun bu seçeneği şu şekilde eklemesini sağlamazsanız:[{"text":" my NEW option)","id":"0"}]
3. Form gönderildiğinde, sadece bu seçeneğin veritabanında olup olmadığını kontrol edin ve kaydetmeden önce oluşturmayın.

Sanırım şimdi daha iyi bir çözüm var

sadece seçili seçeneklerde etiketlemeyi doğru olarak ayarlamak mı istiyorsunuz?

tags: true

dan https://select2.org/tagging

@Fmpwizard cevabını iyileştirin:

//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'dan bu konuya rastladım. https://stackoverflow.com/a/30019966/112680

Tek yapmanız gereken v4.0.6kullanım tags: trueparametresi.

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

Çoğu durumda, değerleri duyarsız yazmaç ile karşılaştırmamız gerekir. Ve bu kod yanlış döndürür, bu da veri tabanında yinelenen kayıtların oluşturulmasına yol açar. Dahası, String.prototype.localeCompare () tarayıcı Safary tarafından desteklenmez ve bu kod bu tarayıcıda çalışmayacaktır;

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

yerine daha iyi gelecek

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

Yardımlar için teşekkürler arkadaşlar, Codeigniter II'de aşağıdaki kodu kullandım: 3.5.2'nin select2 sürümünü kullanıyorum.

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]'};
        }
    },
});