Codeigniter – Membuat Combo Search Sugesti Ajax

Combo search sugesti di codeigniter

Combo search yang memberikan data sugesti ini Saya buat ketika Saya mengerjakan projek sebuah aplikasi penjualan. Pada aplikasi penjualan tersebut ada sebuah teks box yang apabila di ketikkan akan memberikan sugesti berupa data barang.

Untuk input dari teks box tersebut berupa nama barang.

Hal tersebut di buat agar memudahkan pengguna aplikasi untuk mencari dan milih produk yang akan di input kedalam database. Mungkin jika barang atau produk yang ada pada data hanya sedikit, teks box seperti ini tidak terlalu dibutuhkan. Namun jika data barang atau produk terdapat banyak data misal ratusan atau ribuan, maka combo box biasa akan sedikit merepotkan jika harus menyecroll ke bawah.

Merancang combo box search dengan sugesti pada program php nativ biasa tidak serumit membuatnya di CI atau codeigniter. Nah berikut ini cara simpel untuk membuat teks pencarian dengan sugesti di codeigniter.

Combo search sugesti di codeigniter

Untuk bantuan ajax nya silahkan download jquery ini:

https://code.jquery.com/jquery-3.2.1.min.js

Letakkan jquery min js tersebut letakkan di mana script javascript kamu disimpan pada projek kamu. Kemudian panggil url dengan cara:

<script src=”<?php echo base_url();?>assets/js/jquery-3.2.1.min.js”></script>

Pada contoh ini saya meletakkan jquery tersebut di folder assets dan di folder js. Dan saya meletakkan pemanggilan jquery tersebut di footer template aplikasi saya yaitu sebelum tag </body>.

Pemanggilan Ajax produk

Kemudian letakkan script dibawah ini setelah pemanggilan jquery diatas.

$(document).ready(function() {

//produk________

var ac_config = {

source: “<?php echo base_url();?>pembelian/cariProduk“,

select: function(event, ui){

$(“#namaProduk“).val(ui.item.namaProduk);

$(“#stokProduk“).val(ui.item.stokProduk);

$(“#minBeli“).val(ui.item.minBeli);

$(“#idProduk“).val(ui.item.idProduk);

minLength:1

};

$(“#namaProduk“).autocomplete(ac_config);

</script>

Pada script diatas, tag yang berwarna merah adalah pemanggilan data produk yang di tempatkan pada controller pembelian pada fungsi cariProduk. Pada fungsi cariProduk ini data ajax akan di tampilkan berupa data json yang akan di panggil pada form yang ingin digunakan sebagai pencarian produk.

Kemudian tag bewarna biru adalah data yang akan ditampilkan kedalam form-form yang di panggil melalui ajax tadi. Pada kasus ini, tidak semua data saya tampilkan namu untuk nama produk saya tampilkan. Dan untuk data yang lain seperti stok produk dan min beli saya masukkan ke dalam form hidden.

# Controller

Controller cariProduk

Selanjutnya pada fungsi pada controller cariProduk buat script dibawah ini:

function cariProduk(){

$data = $this->M_pembelian->cari_produk();

foreach($data->result() as $row){

$produks[] = array(‘nama’ => $row->namaProduk,’stok’=>$row->stokProduk,’minBeli’=>$row->minBeli,’idProduk’ => $row->idProduk);

} // Cleaning up the term

$term = trim(strip_tags($_GET[‘term’]));

// Rudimentary search

$matches = array();

foreach($produks as $nama){

if(stripos($nama[‘nama’], $term) !== false){

// Add the necessary “value” and “label” fields and append to result set

$nama[‘value’] = $nama[‘nama’];

$nama[‘label’] = “{$nama[‘nama’]}”;

$matches[] = $nama;

} } // Truncate, encode and return the results $matches = array_slice($matches, 0, 6); print json_encode($matches);

}

# Model

class M_pembelian extends CI_Model{

function cari_produk(){

return $this->db->query(“SELECT * FROM produk”);

}

Pada script model diatas tabel yang digunakan adalah tabel produk yang fieldnya yaitu:

idProduk
namaProduk
hargaProduk
stokProduk
minBeli

# View

<?php echo form_open(‘pembelian/insert’);

echo ‘ <div class=”box-body table-responsive”> <div class=”form-group”> <label for=”namaProduk”>Produk (<i><small>ketik untuk cari</small></i>)</label> <input type=”text” name=”namaProduk” value=”” id=”namaProduk” class=”form-control namaProduk” placeholder=”” required=”required” /> <input type=”hidden” id=”stokProduk” class=”stokProduk” name=”stokProduk”> <input type=”hidden” id=”minBeli” class=”minBeli” name=”minBeli”> <input type=”hidden” id=”idProduk” class=”idProduk” name=”idProduk”> </div></div>’; echo ‘<div class=”panel-footer”> ‘; echo form_submit(‘submit’,’Simpan’,’class=”btn btn-primary”‘); echo ‘<a href=”‘.base_url().’produk” class=”btn btn-primary”>Kembali</a>’; echo ‘</div>’; echo form_close(); ?>

Ini adalah salah satu potongan view yang ada pada aplikasi menggunakan codeigniter. Tag warna merah itu adalah sebuah id yang akan menjadi sebuah identitas dimana akan hasil pemanggilan ajax produk yang dicari tadi akan ditampilkan. Untuk teks yang akan menjadi sugesti yaitu pada id form namaProduk.

Untuk kasus yang lain, kamu bisa rubah menjadi kode Produk, kode barang atau yang lainya.

Oia jika tanpa style css. maka tampilan combo akan tidak beraturan. Maka silahkan tambahkan script css berikut agar tidak berantakan combo yang dihasilkan. Untuk penempatannya di view.

Style CSS

Untuk hasilnya seperti tampilan diatas.

Combo search sugesti di codeigniter

# Controller

# Model

# View

Leave a Reply Cancel reply