Cara membuat autocomplete Select2 dengan Ajax

Bagiamana cara membuat autocomplete select2 dengan ajax? mungkin teman-teman sudah sering menggunakan library yang satu ini. Memang, library select2 sangat menarik daripada select biasa.

Apa itu Select2?

Select2 adalah alternatif pengganti penggunaan tag select berbasis jQuery. Select2 mendukung pencarian, kumpulan data jarak jauh, dan hasil pagination (scrolling tak terbatas).

Bagaimana cara membuat Select2 dengan ajax?

Sebenarnya di dokumentasi nya sendir sudah banyak opsi yang dapat kita gunakan, tapi terkadang kita perlu contoh dalam kodingan agar lebih mudah dipahami.

Berikut ini contoh penggunaan select2 dengan ajax yang saya tulis dalam kode javascript.

$("#select2_ajax").select2({
    minimumInputLength: 3,
    tags: [],
    ajax: {
        url: url,
        dataType: 'json',
        type: "GET",
        quietMillis: 50,
        data: function (term) {
            return {
                q: term
            };
        },
        results: function (data) {
            return {
                results: $.map(data, function (item) {
                    // console.log(item);
                    return {
                        id: item.kode,
                        text: item.text
                    }
                })
            };
        }
    }
});

Dalam kode diatas, yang perlu diperhatikan adalah pada select2_ajax merupakan id dari input html yang kita inginkan. Kemudian, url dapat teman-teman ganti dengan source json teman-teman, dan terakhir kode dan text merupakan id value dan text yang muncul dalam select2. semoga bermanfaat.