Dynamic option creation tag di select2

Pada kesempatan kali ini saya akan memberikan tutorial singkat  membuat Dynamic option creation tag di select2, pada fungsi dynamic option creation tag memungkinkan kita untuk membuat option sendiri ketika option yang di sajikan di select2 tidak tersedia, maka kita bisa mengetikkan atau menambahkan option yang kita inginkan.

Fitur ini sangat beguna bagi UX sebab user bisa menambahkan option yang diinginkan jika tidak ada dalam list drop down, sebagai contoh silahkan ada lihat kode dan gambar di bawah ini

 
 <select class="form-control">
  <option selected="selected">orange</option>
  <option>white</option>
  <option>purple</option>
</select>

$(".js-example-tags").select2({
  tags: true
});

Dari kode di atas maka di hasilkan dropdownlist select 2 seperti di bawah ini

 dari gambar di atas terlihat user bisa mengetikkan opsi yang diinginkan ketika di list dropdown tidak tersedia, dengan fitur tagging di select 2 ini memudahkan user dan membuat user experiance lebih mudah dalam membuat opsi yang tidak ada di dropdown list. Untuk detail contoh penggunaan tagging di select 2 anda bisa menuju dokumentasinya di sini

https://select2.org/tagging

Semoga penjelasan singkat ini bisa bermanfaat untuk saya pribadi dan anda yang membacanya, ikatlah ilmu dengan menuliskannya dan aplikasikan ilmu dengan mempraktekkannya.

Selamat Mencoba

Share this post