Multiple input dengan Select2 dan Codeigniter

Select2 jadi pilihan yang nyaman buat user untuk autocomplete. Select2 ini bisa digunakan tanpa harus pilih dahulu hasil autocomplete yang kita ambil dari database. Selain itu, satu hal yang enak juga, user bisa langsung tab dan langsung terisi datanya. Lagi-lagi tanpa harus pilih data seperti autocomplete pada kendoUI dan autocomplete milik jqueryUI.

Select2 pun mendukung pagination sederhana yang dikenal dengan ‘infinite scroll‘. Sayangnya, saya belum menemukan autocomplete dengan view grid lalu bisa di paging. *emang ada?*, ada, saya baru tahu juga dari temen yang lama menggunakan ExtJS. ExtJs ternyata bisa handle konsep seperti itu.

Oke, terlepas hal itu. Kita coba mulai gunakan select2 dengan Codeigniter. Konsepnya, pada tutorial ini. Saya buat multiple input dengan select2, yang otomatis terhandle oleh Codeigniter untuk ambil datanya.

Awalnya di view codeigniter, kita buat table dengan list grid dengan table sederhana seperti kode dibawah ini.

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
<table id="table_list_sparepart" class="table table_list table-striped table-hover table-bordered dataTable">
    <thead>
        <tr>
            <th style="width:2%;">No</th>
            <th style="width:10%;">Sparepart Code</th>
            <th style="width:20%;">Sparepart Name</th>
            <th style="width:8%;">Price</th>
            <th style="width:8%;">Disc (%)</th>
            <th style="width:3%;">Qty</th>
            <th style="width:10%;">Subtotal</th>
        </tr>
    </thead>
    <tbody>
        <?php for($i=0; $i<10; $i++): ?>
        <tr data-rowid="<?php echo $i; ?>">
            <td align="center"><div class="text-center"><?php echo $i+1; ?></div></td>
            <td>
                <input type="hidden" data-rowid="<?php echo $i; ?>" class="sparepart_code span12" id="sparepart_code_<?php echo $i; ?>" name="sparepart_code_<?php echo $i; ?>" value="" />
                <input type="hidden" data-rowid="<?php echo $i; ?>" class="sparepart_id" id="sparepart_id_<?php echo $i; ?>" name="sparepart_id_<?php echo $i; ?>" value="" />
            </td>
            <td><input type="text" readonly="true" class="sparepart_name span12" id="sparepart_name_<?php echo $i; ?>" name="sparepart_name_<?php echo $i; ?>" value="" /></td>
            <td><input type="text" readonly="true" data-rowid="<?php echo $i; ?>" class="sparepart_hargajual span12" id="sparepart_hargajual_<?php echo $i; ?>" name="sparepart_hargajual_<?php echo $i; ?>" value="" /></td>
            <td><input type="text" data-rowid="<?php echo $i; ?>" class="sparepart_discount inputnumber span12" id="sparepart_discount_<?php echo $i; ?>" name="sparepart_discount_<?php echo $i; ?>" value="" /></td>
            <td><input type="text" data-rowid="<?php echo $i; ?>" class="sales_item_qty inputnumber span12" id="sales_item_qty_<?php echo $i; ?>" name="sales_item_qty_<?php echo $i; ?>" value="" /></td>
            <td><input type="text" data-rowid="<?php echo $i; ?>" readonly="true" class="subtotal span12" id="subtotal_<?php echo $i; ?>" name="subtotal_<?php echo $i; ?>" value="" /></td>
        </tr>
        <?php endfor; ?>
    </tbody>
</table>

Pertama page load, akan load data table ini dulu seperti biasa. Lalu setelah berhasil, kita loop data sparepart_code agar select2 bisa dijalankan. Caranya seperti dibawah ini.

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
31
32
33
34
35
36
37
$('.sparepart_code').each(function(){
    var rowid = $(this).data('rowid');
    $(this).select2({
        dropdownAutoWidth: true,
        width: 'resolve',
        placeholder: 'Search',
        minimumInputLength: 1,
        allowClear: true,
        delay: 2000,
        ajax: {
            dataType: "json",
            url: main_url + '/get_data_sparepart',
            data: function (term, page) {
                return {
                    term: term
                };
            },
            results: function (data) {
                var results = [];

                $.each(data, function(index, item){
                    results.push({
                        id: item.sparepart_code,
                        text: item.sparepart_code + ' - ' + item.sparepart_name,
                        rowid: rowid,
                        sparepart_name: item.sparepart_name,
                        sparepart_hargajual: item.sparepart_hargajual,
                        sparepart_id: item.sparepart_id,
                        sparepart_code: item.sparepart_code
                    });
                });
                return { results: results };
            },
            cache: true
        }
    });
});

Pada kode diatas terdapat:

  • var rowid: Digunakan untuk handle ini input yang keberapa ya? naah, dari situ kita bisa assign ke id dari kolom input yang kita mau. Ini custom, karena user ingin menampilkan data setelah berhasil keluar data select2 ke input tertentu. Dalam kasus ini, sparepart name dan sparepart_id yang terhidden pun di assign untuk keperluan lain.
  • url: main_url + ‘/get_data_sparepart’: Digunakan untuk ambil data ke database dengan codeigniter. Konsep ini bisa dengan yang lain selain codeigniter seperti laravel atau yang lain. Konsepnya hanya mengambil data dari model, lalu returnkan dalam bentuk json. variable main_url sendiri hanya base_url() dan nama controller yang sedang aktif dan dipakai untuk ambil data ke database
  • results: function (data) : Pada block javascript function result ini adalah handle untuk memanipulasi data hasil dari back codeigniter berupa json, ke bentuk select2 yang diinginkan. Yang paling utama itu adalah id dan text. ID akan meng-assign id value dari sparepart_code, sedangkan text adalah hasil keluaran select2 yang diinginkan. Disana saya tampilkan sparepart code dengan sparepart name karena kebutuhan user pastinya :). Selain ID dan Text, anda dapat menambahkan variable lain untuk keperluan lain seperti contoh diatas saya tambahkan beberapa variable.
  • data: function (term, page) { : Pada block ini, adalah handle untuk lempar variable yang diketikan user saat select2 jalan yang dikenal diatas adalah variable term. Bisa gak kita tambahin variable lain? Bisa banget, silahkan tambahkan variable lain untuk dihandle di controller codeigniter

Setelah itu, mari kita coba buka untuk handle di controller dan modelnya codeigniter.
Controllernya:

1
2
3
4
5
6
7
8
9
10
11
public function get_data_sparepart() {
    $term = $this->input->get('term');
    // variable lain bisa dipake dari view yang diset
    // $datalain = $this->input->get('datalain');

    // load data ke model
    $data_sparepart = $this->M_New_Sales_Service->get_sparepart_by($term,'sparepart_id,sparepart_code,sparepart_name, sparepart_hargajual');

    // keluarkan dalam bentuk json
    echo json_encode($data_sparepart);  
}

Modelnya:

1
2
3
4
5
6
7
function get_sparepart_by($term, $column='*') {
    $this->db->select($column);
    $this->db->like('sparepart_code',$term);
    $this->db->or_like('sparepart_name',$term);
    $data = $this->db->from('sparepart')->get();
    return $data->result_array();
}

Nah cuma gitu doang di Codeigniter. Setelah ini, muncul data seperti yang kita mau.

Tadi saya sempet bilang diatas, jika ada kebutuhan setelah kita memilih select2 data tertentu akan menampilkan data sparepart name dan assign sparepart_id. Untuk handle proses ini, kita buat handle event on selecting select2 seperti code dibawah ini.

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).on("select2-selecting",".sparepart_code", function(e) {
    console.log('select2-selecting event');
    console.log(e);
    var sparepart_id = e.choice.sparepart_id;
    var rowid = e.choice.rowid;
    var sparepart_code = e.choice.sparepart_code;  
    var sparepart_name = e.choice.sparepart_name;  
    var sparepart_hargajual = e.choice.sparepart_hargajual;  
   
    $('#sparepart_name_'+rowid).val(sparepart_name);
    $('#sparepart_id_'+rowid).val(sparepart_id);
    $('#sparepart_hargajual_'+rowid).val(sparepart_hargajual);
});

Variable e adalah variable data select2 yang sudah kita set diatas di point ke 3. Sedangkan, jika penasaran. console.log e saja maka akan terlihat data object choice dimana data yang telah kita pilih. Dari situ, kita bisa get dan set sesuai dengan kebutuhan.

Diatas juga terlihat, bagaimana rowid kita gunakan untuk assign langsung ke ID yang telah kita set di table. Jadi kita gak usah looping lagi, langsung set aja šŸ˜€

Seperti itulah sederhana multiple input dengan select2 dan Codeigniter. Ada yang bingung? atau ada perbaikan kode yang salah? monggo..terbuka perbaikan code šŸ™‚

Moga bermanfaat

PIC

select2
select2

Note:
Contoh artikel ini ada pada aplikasi bengkel yang saya buat. Untuk melihat contoh penggunaan ini pada POS aplikasi bengkel. Berikut adalah video nya šŸ™‚

7 comments

  1. gannn tolong dong link download ane butuh bgt jQuery point of sale kek gitu hhehehe
    ane dah coba pakek autocomplete tapi gagal.

    tolong ya

Leave a Reply

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

%d bloggers like this: