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

Question

我在 codeigniter 中使用 jquery 还是个新手，所以我希望你能乐意帮助我。我想创建自动完成的下拉列表，其中选择一个自动完成选项时，它将显示其他相关字段。输出变成这样，没有显示值

这是我的代码：型号

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!');
            }
        },
    });
});

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

Autocomplete dropdown in codeigniter doesn't works

codeigniter

jquery-ui

jquery-ui-autocomplete