codeigniter中的自动完成下拉列表不起作用

时间:2018-04-12 08:09:55

标签: codeigniter jquery-ui jquery-ui-autocomplete

我仍然在codeigniter中使用jquery,所以我希望你能乐意帮助我。 我想创建自动完成下拉列表,当选择一个自动完成选项时,它将显示其他相关字段。 输出变成这样,没有值显示 enter image description here

这是我的代码: 的模型

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>
&#13;
<?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>
&#13;
&#13;
&#13;

我希望有人能帮助我。

1 个答案:

答案 0 :(得分:2)

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

您的代码应如下所示

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

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