Autocomplete bertingkat dengan KendoUI pada Codeigniter

Autocomplete berguna untuk mengeluarkan data yang biasanya cukup kita pakai select / combobox biasa, namun dikarenakan data yang dikeluarkan banyak maka tidak mungkin select / combobox digunakan karena akan memanjang kebawah. Untuk itulah kita gunakan Autocomplete.

Kasus yang sering terjadi adalah ketika combobox yang satu bergantung dengan combobox yang lain. Saya istilahkan itu adalah combobox bertingkat. Lalu bagaimana hal itu diterapkan pada autocomplete ? Bisa gak autocomplete bertingkat diterapkan ?

Alur sebenarnya sederhana, dapatkan identik dari autocomplete A, lalu panggil autocomplete B dengan menge-post kembali value dari identik autocomplete A.

Saya misalkan contoh code yang saya buat adalah kasus dimana fault memiliki group dimana satu group fault memiliki banyak fault.

Berikut view dari sample :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="span6">
    <fieldset>
        <legend>Data Fault</legend>
        <div class="control-group">
            <label class="control-label" for="fault_group_id">Fault Group Desc</label>
            <div class="controls">
                <input type="hidden" class="input-xlarge" name="fault_group_code" id="fault_group_code">
                <input type="text" class="input-xlarge" name="fault_group_name" id="fault_group_name">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="fault_id">Fault Desc</label>
            <div class="controls">
                <input type="hidden" class="input-xlarge" name="fault_code" id="fault_code">
                <input type="text" class="input-xlarge" name="fault_name" id="fault_name">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="fault_clasification">Fault Clasification</label>
            <div class="controls">
                <textarea class="input-xlarge" name="fault_clasification" id="fault_clasification">
                </textarea>
            </div>
        </div>
    </fieldset>
</div>

Jangan lupa pada view diatas, panggil dulu javascript kendoui dan css-nya ya.

Setelah kita buat html diatas, sekarang kita buat javascript untuk autocomplete dengan KendoUI.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$("#fault_group_name").kendoAutoComplete({
    filter: "startswith",
    placeholder: "Select Fault Group...",
    startswith:'',
    select:function(e){
        var dataItem = this.dataItem(e.item.index());
        var fault_group_code = dataItem.fault_group_code;
        $("#fault_group_code").val(fault_group_code);
    },
    dataTextField: "fault_group_name",
    dataSource: {
        serverFiltering: true,
        transport: {
            read:{
                dataType: "json",
                type:'POST',
                data:{
                    probe: function(){
                        return $("#fault_group_name").val();
                    }
                },
                url: main_url + '/get_fault_group_autocomplete'
            }
        }
    }  
});

Penjelasan kode :

  • Javascript diatas adalah fungsi untuk autocomplete fault group.
  • Variable main_url adalah base_url() dan nama controller. Jadi kalau saya namakan controller adalah fault dan dijalankan di localhost, berarti read transport URL-nya adalah : http://localhost/fault/get_fault_group_autocomplete.
  • select:function(e) adalah fungsi ketika autocomplete dipilih.
  • Probe: function(){} adalah variable yang akan kita lempar (post) ke controller fault pada fungsi/method get_fault_group_autocomplete.

Pada controller fault, kita buat method get_fault_group_autocomplete seperti :

1
2
3
4
5
6
7
public function get_fault_group_autocomplete(){
    $this->load->model('m_fault_group','m_autocomplete');
    $column = 'fault_group_code,fault_group_name';
    $probe = $this->input->post('probe');
    $data = $this->m_autocomplete->get_all_autocomplete($column,$probe);
    echo json_encode($data);
}

fault_group_code dan fault_group_name adalah nama field yang saya define pada table.

Pada model fault_group kita buat fungsi get_all_autocomplete:

1
2
3
4
5
6
7
8
9
10
11
function get_all_autocomplete($column,$probe){
    if(isset($column)) {
        $this->db->select($column);
    }else{
        $this->db->select('*');
    }
    $this->db->like('fault_group_name',$probe);
    $this->db->or_like('fault_group_no',$probe);
    $data = $this->db->from($this->_tbl)->get();
    return $data->result_array();
}

fault_group_name dan fault_group_no adalah field pada table sebagai acuan kemungkinan yang user ketik pada field autocomplete. Dan $this->_tbl hanya define nama table saja.

Sampai disini, kita telah berhasil membuat satu autocomplete yaitu autocomplete untuk fault group.

Kembali ke view, kita akan membuat autocomplete untuk mendapatkan fault berdasarkan fault group yang dipilih user saat autocomplete fault group.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$("#fault_name").kendoAutoComplete({
    filter: "startswith",
    placeholder: "Select fault...",
    startswith:'',
    select:function(e){
        var dataItem = this.dataItem(e.item.index());
        var fault_code = dataItem.fault_code;
        $("#fault_code").val(fault_code);
    },
    dataTextField: "fault_name",
    dataSource: {
        serverFiltering: true,
        transport: {
            read:{
                dataType: "json",
                type:'POST',
                data:{
                    probe: function(){
                        return $("#fault_name").val();
                    },
                    where_key: 'fault_group_code',
                    where_value: function(){
                        return $("#fault_group_code").val();
                    }
                },
                url: main_url + '/get_fault_autocomplete'
            }
        }
    }  
});

Perbedaan yang mendasar adalah pada data yang akan kita kirim. Seperti yang saya sebut diatas, autocomplete bertingkat ini konsepnya mengirim identik autocomplete A saat memanggil autocomplete B. Nah itu terlihat pada code diatas pada potongan kode ini :

1
2
3
4
5
6
7
8
9
data:{
    probe: function(){
        return $("#fault_name").val();
    },
    where_key: 'fault_group_code',
    where_value: function(){
        return $("#fault_group_code").val();
    }
},

Terlihat kita kirim 3 variable: probe, where_key, where_value. Ini hanya define yang saya buat aja sih, bisa diubah sesuai kebutuhan.

Kita buat fungsi / method get_fault_autocomplete untuk memanggil fault berdasarkan fault group yang dipilih user.

1
2
3
4
5
6
7
8
9
public function get_fault_autocomplete(){
    $this->load->model('m_fault','m_autocomplete');
    $column = 'fault_name,fault_code,fault_no';
    $probe = $this->input->post('probe');
    $where_key = $this->input->post('where_key');
    $where_value = $this->input->post('where_value');
    $data = $this->m_autocomplete->get_all_autocomplete_where_view($column,$probe,$where_key,$where_value);
    echo json_encode($data);
}

Saya buat juga method get_all_autocomplete_where_view pada model m_fault seperti kode dibawah ini :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function get_all_autocomplete_where_view($column,$probe,$where_key,$where_value){
    if(isset($column)) {
        $this->db->select($column);
    }else{
        $this->db->select('*');
    }
    $this->db->where($where_key,$where_value);

    $where_like = "(
        fault_name LIKE '%$probe%' OR fault_no LIKE '%$probe%' OR fault_description LIKE '%$probe%'
    )"
;
    $this->db->where($where_like);
    $data = $this->db->from($this->_view)->get();
    return $data->result_array();
}

$this->_view adalah variable untuk define view table saja. Dan variable fault_name, fault_no, fault_description adalah nama field pada table fault.

Sampai disini, contoh kasus sederhana ini semoga bisa diterapkan untuk autocomplete bertingkat dengan kendoui pada Codeigniter ke beberapa projek temen-temen.

2 comments

  1. Request tutorial donk pak

    CI autocomplete yang punya add row otomatis dan insert massal ke database,

    Pahalanya banyak nolong orang yang perlu bantuan pak, hehe

    Thanks alot 😀

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: