Select2 dropdown tapi izinkan nilai baru oleh pengguna?

Saya ingin memiliki dropdown dengan sekumpulan nilai tetapi juga memungkinkan pengguna untuk "memilih" nilai baru yang tidak terdaftar di sana.

Saya melihat bahwa select2 mendukung ini jika Anda menggunakannya dalam tagsmode, tetapi adakah cara untuk melakukannya tanpa menggunakan tag?

Untuk versi 4+, periksa jawaban di bawah ini oleh Kevin Brown

Di Select2 3.5.2 dan yang lebih lama, Anda dapat menggunakan sesuatu seperti:

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

(diambil dari jawaban di milis select2, tetapi tidak dapat menemukan tautannya sekarang)

The jawaban yang sangat baik yang disediakan oleh @fmpwizard bekerja untuk Select2 3.5.2 dan bawah, tapi itu tidak akan berhasil di 4.0.0 .

Sejak awal (tapi mungkin tidak sedini pertanyaan ini), Select2 telah mendukung "pemberian tag": di mana pengguna dapat menambahkan nilai mereka sendiri jika Anda mengizinkannya. Ini dapat diaktifkan melalui tagsopsi, dan Anda dapat bermain-main dengan contoh di dokumentasi .

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

Secara default, ini akan membuat opsi yang memiliki teks yang sama dengan istilah pencarian yang mereka masukkan. Anda dapat memodifikasi objek yang digunakan jika Anda ingin menandainya dengan cara khusus, atau membuat objek dari jarak jauh setelah dipilih.

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

Selain berfungsi sebagai tanda yang mudah dikenali pada objek yang diteruskan melalui select2:selectacara, properti tambahan juga memungkinkan Anda merender opsi sedikit berbeda pada hasilnya. Jadi, jika Anda ingin memberi sinyal visual bahwa ini adalah opsi baru dengan meletakkan " (baru) " di sebelahnya, Anda dapat melakukan sesuatu seperti ini.

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

Demi menjaga kodenya tetap hidup, saya memposting kode @rrauenza Fiddle dari komentarnya .

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

Karena banyak dari jawaban ini tidak berfungsi di 4.0+, jika Anda menggunakan ajax, Anda dapat meminta server menambahkan nilai baru sebagai opsi. Jadi akan bekerja seperti ini:

1. Pengguna mencari nilai (yang membuat permintaan ajax ke server)
2. Jika nilainya ternyata bagus, kembalikan opsi. Jika tidak, server menambahkan opsi itu seperti ini:[{"text":" my NEW option)","id":"0"}]
3. Ketika formulir dikirimkan, periksa untuk melihat apakah opsi itu ada di db dan jika tidak buat sebelum menyimpannya.

Saya pikir ada solusi yang lebih baik sekarang

cukup setel penandaan ke true pada opsi pilih?

tags: true

dari https://select2.org/tagging

Meningkatkan jawaban @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

Saya baru saja menemukan ini dari Kevin Brown. https://stackoverflow.com/a/30019966/112680

Yang harus Anda lakukan v4.0.6adalah menggunakan tags: trueparameter.

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

Dalam banyak kasus, kita perlu membandingkan nilai dengan register tidak sensitif. Dan kode ini akan mengembalikan false, yang akan mengarah pada pembuatan rekaman duplikat dalam database. Selain itu, String.prototype.localeCompare () tidak didukung oleh Safary browser dan kode ini tidak akan berfungsi di browser ini;

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

akan lebih baik menggantikan

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

Terima kasih atas bantuannya, saya menggunakan kode di bawah ini dalam Codeigniter II saya menggunakan versi: 3.5.2 dari 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]'};
        }
    },
});