Lompat ke konten Lompat ke sidebar Lompat ke footer

Select 2 Codeigniter 3

Select2 memberi Anda kotak pilih yang dapat disesuaikan dengan dukungan untuk pencarian, penandaan, kumpulan data jarak jauh, pengguliran tak terbatas, dan banyak opsi lain yang sangat sering digunakan. Instalasinya cukup mudah kalian bisa kunjungi https://select2.org/getting-started/installation. Berikut adalah Penggunaan Select 2 di Codeigniter versi 3

DATABASE

Pertama buat sebuah database atau gunakan database yang sudah ada

TABEL

Buat tabel sebagai berikut

  • field name id type data int dan set sebagai Primary Key centang Auto increment
  • field name category_name type data varchar(25)



MODEL

Buat sebuah model baru atau yang sudah ada kemudian buat sebuah function di dalam model tersebut 

function getCategories($searchTerm = "")
    {
        $this->db->select('*');
        $this->db->where("category_name like '%" . $searchTerm . "%' ");
        $fetched_records = $this->db->get('product_categories');
        $item = $fetched_records->result_array();

        $data = [];
        foreach ($item as $value) {

            $data[] = [
                "id"   => $value['id'],
                "text" => $value['category_name']
            ];
        }
        return $data;
    }

CONTROLLER

Tambahkan function pada controller yang sudah ada atau buat controller baru
jangan lupa load model yang sudah ditambahkan function Model diatas
public function get_categories()
    {
        $searchTerm = $this->input->post('searchTerm');
        $response   = $this->products_m->getCategories($searchTerm);
        $this->output->set_content_type('application/json')->set_output(json_encode($response));
    }

VIEW

Pada View tambahkan code berikut 
<select id="category_id" name="category_id" class="form-control select2" style="width: 100%;">
</select>
<div class="invalid-feedback invalid-feedback-category_id"></div>

JAVASCRIPT

Pada View juga tambahkan code javascript berikut 
$('#category_id').select2({
        theme: "bootstrap4",
        allowClear: true,
        ajax: {
            url: base_url + 'admin/products/get_categories',
            type: 'POST',
            dataType: 'JSON',
            delay: 250,
            data: function (params) {
                return {
                    searchTerm: params.term // search term
                };
            },
            processResults: function (response) {
                return {
                    results: response
                };
            },
            success: function () {

            },
        },
        cache: true,
        placeholder: 'Pilih Kategori Produk',
});

Posting Komentar untuk "Select 2 Codeigniter 3"