Membuat Input Tags Manggunakan JQuery “Tagify”

Input tags adalah suatu inputan dalam satu element yang di dalamnya terdapat beberapa inputan dengan model yang sama. Misalkan saja pada suatu element dengan tipe input, kita memasukkan beberapa email. Maka tampilan umumnya sebagai berikut :

Pada gambar di atas, tempilannya sangat kurang menarik. Dengan menggunakan JQuery Tagify, maka tampilannya akan menjadi seperti gambar di bawah ini :

Pada gambar ke-2, tampilannya sangat menarik bukan? nah, bagaimana cara penerapannya? Kita coba cara membuatnya. Pertama tama kita buat element input sederhana. Sebagai contoh :

 
<input type="text" name="contoh" id="contoh"/>
 

Setelah itu, kita import beberapa code CSS dan JavaScript JQuery Tagify seperti di bawah ini :

 
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.polyfills.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />
 

Kemudian buat script agar element yang kita buat sebelumnya dapat menampilkan inputan seperti pada gambar 2. Berikut script mudahnya:

 
<script>
var input = document.getElementById('contoh')
new Tagify(input)
</script>
 

Apabila sudah selesai, silahkan Anda simpan script yang Anda buat. Kemudian buka menggunakan browser. Maka hasilnya akan terlihat menarik. Contoh hasilnya, bisa Anda buka pada halaman hasil Tagify.

Nah, cukup mudah bukan? Demikianlah bagaimana cara Membuat Input Tags Manggunakan JQuery “Tagify”. Semoga bermanfaat. Selamat mencoba.