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();
        }
    })
});

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