Kode select2 yang berguna

Bismillaahirrohmaanirrohiim…

Berikut ini adalah kode yang biasanya digunakan untuk library javascript select2.

Ingat, select2 versi 4 keatas, tidak bisa menggunakan selector INPUT, harus <SELECT>.

Menggunakan bootstrap 3 dan select2 versi 4.0.3

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css" rel="stylesheet" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js"></script>
//jika kotak lebih kecil bisa dicustom dengan css
<style type="text/css">
    .select2-container .select2-selection--single {
        height:34px ;
    }
</style>

Merubah select menjadi select2

$("#selector").select2();

Mengambil option dengan ajax

//normal
$("#selector").select2({
    minimumInputLength: 2,
    allowClear: true,
    placeholder: "Pilih Data",
    ajax: {
        dataType: "json",
        url: "urljson?act=list",
        delay: 0,
        data: function(params) {
            return {
                search: params.term
            }
        },
        processResults: function (data, page) {
            return {
                results: data
            };
        }
    }
}).on("select2:select", function (evt) {
    var data = $("#selector option:selected").text();
    alert(data);
});

kode PHP nya
$search = $_GET['search'];
$idx = 0;
$list[$idx]['id'] = 123;
$list[$idx]['text'] = 'Teks option';
echo json_encode($list);
exit();

Mengambil option dengan ajax dan URL bersifat dinamis

//jika url dinamis, misalnya mengambil nilai dari data yang dinamis
$("#selector").select2({
    minimumInputLength: 2,
    allowClear: true,
    placeholder: "Pilih Data",
    ajax: {
        dataType: "json",
        url: function() {
              return getUrl()
        },
        delay: 0,
        data: function(params) {
            return {
                search: params.term
            }
        },
        processResults: function (data, page) {
            return {
                results: data
            };
        }
    }
}).on("select2:select", function (evt) {
    var data = $("#selector option:selected").text();
    alert(data);
});

fungsi javascriptnya
function getUrl() {
    return "urljson?act=list&dinamis="+$("#selector").val();
}

Mengisi option pada select2 secara dinamis menggunakan ajax

$("#selector").select2();
function isiOption(id) {
    $("#selector").html("");

    $.ajax({
        type: "POST",
        data: "act=x&did=x",
        url: "url?getdata="+id,
        success: function(e) {
            $("#selector").append(e);
            $("#selector").trigger("change"); 
        },
        beforeSend: function(e) {
        },
        complete: function(e) {
        },
        error: function(e, s, a) {
            alert("Gagal saat load data, silahkan ulangi kembali [1].");
        }
    })
}
fungsi PHP nya
echo '<option value="0">Pilih Data</option>';
echo '<option value="1">Pilih Data 1</option>';
echo '<option value="2">Pilih Data 2</option>';
echo '<option value="3">Pilih Data 3</option>';
exit();

Jika menggunakan form pada bootstrap 3

//CSS untuk menyembunyikan icon x allow clear dan segitiga dropdown
.select2-container {
position:absolute;
}
//HTML nya
<div class="form-group">
    <label for="selector">Selector*</label>
    <div class="input-group">
    <select name="selector" id="selector" style="width: 100%;" class="form-control use-select2" >
        <?php
        echo '<option value="0">Pilih Selector</option>';
        ?>
    </select>
    <span class="input-group-btn">
        <button class="btn btn-default" type="button" data-select2-open="single-append-text">
            <span class="glyphicon glyphicon-search"></span>
        </button>
    </span>
    </div>

</div>

Mengganti nilai pada select2 secara dinamis

$("#selector").val("newvalue").trigger("change"); 

Memberi nilai default pada select2 ajax

$("#selector").append("<option value='d' selected='selected'>Nilai</option>").trigger("change");

Handle clear select2 yang dinamis plus ambil data dengan ajax

$("#selector_id").change(function(){

    showLoading();

    var selector_id = $(this).val();
    if (selector_id===null || selector_id=="null" || selector_id=="" || !selector_id) {

        $("#user_telp").val("").removeAttr("readonly");
        $("#user_alamat").val("").removeAttr("readonly");
        $("#user_nama").val("").removeAttr("readonly");
        $("#jenis").val("personal").change();

        hideLoading();
        return;
    }

    // alert("change "+selector_id);
    // return;

    $.ajax({
        type: "POST",
        data: "did="+selector_id,
        url: "yoururl?getact=getcustomerdetail",
        success: function(e) {
            try {
                var data = $.parseJSON(e);
                $("#user_telp").val(data.user_telp).attr("readonly","readonly");
                $("#user_alamat").val(data.user_alamat).attr("readonly","readonly");
                $("#user_nama").val(data.user_nama).attr("readonly","readonly");
                $("#jenis").val(data.jenis).change();
                
            } catch (s) {

                $("#user_telp").removeAttr("readonly");
                $("#user_alamat").removeAttr("readonly");
                $("#user_nama").removeAttr("readonly");

                alert("Gagal saat load data, silahkan ulangi kembali [0].");
            }
        },
        complete: function(e) {
            hideLoading();
        },
        error: function(xhr, ajaxOptions, thrownError) {
            $("#user_telp").val("").removeAttr("readonly");
            $("#user_alamat").val("").removeAttr("readonly");
            $("#user_nama").val("").removeAttr("readonly");
            $("#jenis").val("personal").change();

            hideLoading();
        }
    })
});

tags yang tidak case sensitive

Tags digunakan untuk mencari nilai yang sudah ada diselect, jika tidak maka bisa ditambahkan otomatis dengan menandai data yang sudah ada dengan ID. Nah biasanya kan yang kita ketik beda huruf besar kecilnya dianggap baru, solusinya:

 $("#idselect").select2({
    tags: true,
    insertTag: function(data, tag) {
         var $found = false;
         $.each(data, function(index, value) {
             if($.trim(tag.text).toUpperCase() == $.trim(value.text).toUpperCase()) {
                 $found = true;
             }
         });

         if(!$found) data.unshift(tag);
     }
 });

Reset nilai select2

$('#mySelect2').val(null).trigger('change');

tidak focus pada input saat klik select2

 $(document).on('select2:open', () => {
    document.querySelector('.select2-search__field').focus();
  });
//ini terjadi jika menggunakan jQuery 3.6.0

mengambil semua nilai yang dipilih setelah event selected

$('#mySelect2').on('select2:select', function (e) {
    var data = e.params.data;
    console.log(data);
});

jika select2 di dalam modal bootstrap

    $("#id_jenis_barang, #id_satuan").select2({
        dropdownParent: $("#modalBarang"),

Demikian, jika ada yang ditanyakan bisa post di komentar. semoga bermanfaat.