codeigniter 中的自动完成下拉菜单不起作用

Question

我还是新手，在 codeigniter 中使用 jquery，所以我希望你能很乐意帮助我。 I want to create autocomplete dropdown where when one option of autocomplete is selected, it will show other related fields. 输出变成这样，没有显示的价值

这是我的代码： 型号

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();
}

控制器

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>

我希望任何人都可以帮助我解决这个问题。

Answer 1

您的代码似乎工作正常，但标签值未显示在下拉列表中。只需在数组中添加value 和label 键值即可检查其是否正常工作。

您的代码应如下所示

$arr_result[] = array(
  'kode'  => $row->kode_mtk,
  'nama'  => $row->nama_mtk,
  'value' => $row->nama_mtk,
  'label' => $row->nama_mtk,
);

另外，在自动完成 jquery 函数中添加以下回调函数

$( "#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!');
            }
        },
    });
});