Penggunaan QuerySelectorAll pada Tagify

Pada beberapa artikel sebelumnya, kita telah membahas bagaimana cara memeasang dan penggunaan dari tagify. Namun muncul pertanyaan. Bagaimana apabila penggunaan tagify lebih dari satu tag? Apabila coders belum paham bagaimana cara pemasangan dan penggunaannya, silahkan baca artikel Membuat Input Tags Manggunakan JQuery “Tagify”. Pada artikel tersebut, agar tagify bekerja, kita harus menuliskan beberapa baris Javascript seperti berikut :

 
var input = document.getElementById('contoh')
new Tagify(input)
 

Lalu bagaimana caranya apabila menggunakan lebih dari satu inputan tag? Apakah akan menuliskan satu persatu seperti ini?

 
var input = document.getElementById('contoh')
new Tagify(input)

var input2 = document.getElementById('contoh2')
new Tagify(input2)
.
.
.
var input-n = document.getElementById('contoh-n')
new Tagify(input-n)
 

Tentu saja tidak. Kita tidak menggunakan cara di atas. Akan tetapi, kita menggunakan querySelectorAll pada Javascript. Kita buat dulu tag input html baru. Begini codenya :

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

Setelah itu, kita tuliskan code Javascript. Berikut codenya :

 
    var selector = document.querySelectorAll('.contoh')
    for (let i = 0; i < selector.length; i++) {
      new Tagify(selector[i])
    }
 

Nah, dengan penggunaan querySelectorAll, dan Javascript di atas, maka kita tidak perlu lagi untuk menuliskan satu persatu class name untuk tiap tag input html. Kita hanya menuliskan code berikut :

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

Maka fungsi tagify akan berjalan pada semua class name contoh. Nah, mudah sekali bukan? Demikianlah bagaimana cara Penggunaan QuerySelectorAll pada Tagify. Semoga bermanfaat. Silahkan mencoba.