Autocomplete dropdown in codeigniter doesn't works - codeigniter

Question

I'm still new using jquery in codeigniter so i hope you can gladly help me.
I want to create autocomplete dropdown where when one option of autocomplete is selected, it will show other related fields.
The output become like this, there's no value to display
And this is my codes :
Model
function search_mtk($kode_mtk){
$this->db->like('kode_mtk', $kode_mtk , 'both');
$this->db->order_by('kode_mtk', 'ASC');
$this->db->limit(5);
return $this->db->get('m_mata_kuliah')->result();
}
Controller
public function get_mtk(){
if (isset($_GET['term'])) {
$result = $this->kit_model->search_mtk($_GET['term']);
if (count($result) > 0) {
foreach ($result as $row)
$arr_result[] = array(
'kode' => $row->kode_mtk,
'nama' => $row->nama_mtk,
);
echo json_encode($arr_result);
}
}
}
<script type="text/javascript">
$( "#kode_mtk" ).autocomplete({
source: "<?php echo base_url('fak/kit/get_mtk/?');?>",
select: function (event, ui) {
$('[name="kode_mtk"]').val(ui.item.kode);
$('[name="nama_mtk"]').val(ui.item.nama);
}
});
});
</script>
<?php echo form_open_multipart('fak/kit/file_data');?>
<div class="form-group">
<label for="program">Kode Matakuliah <span style="color:#FF0000">*</span>:</label>
<input type="text" class="form-control" id="kode_mtk" name="kode_mtk" placeholder="Type course code" />
</div>
<div class="form-group">
<label for="program">Nama Matakuliah<span style="color:#FF0000">*</span>:</label>
<input type="text" class="form-control" name="nama_mtk" placeholder="Type course name" />
</div>
<button type="submit" class="btn btn-success">Submit</button>
I hope anyone can help me with this.

Answer 1

Your code seems working fine but the label value not showing in the drop-down. just add value and label key value in the array to check its working or not.
Your code should be like below
$arr_result[] = array(
'kode' => $row->kode_mtk,
'nama' => $row->nama_mtk,
'value' => $row->nama_mtk,
'label' => $row->nama_mtk,
);
also, add the following call back function inside autocomplete jquery function
$( "#kode_mtk" ).autocomplete({
source: "<?php echo base_url('fak/kit/get_mtk/?');?>",
select: function (event, ui) {
$('[name="kode_mtk"]').val(ui.item.kode);
$('[name="nama_mtk"]').val(ui.item.nama);
},
response: function(event, ui){
if(ui.content.length === 0){
console.log('No results loaded!');
}else{
console.log('success!');
}
},
});
});