CodeIgniter中Autocomplete下拉框无法显示关联字段求助

兄弟，我来帮你捋捋这个问题哈！你现在遇到的是CodeIgniter结合jQuery Autocomplete实现选中后显示关联字段但没内容的情况，咱们一步步来排查和解决：

第一步：补全并检查你的Model代码 #

看你贴的Model代码没写完，大概率是返回结果的方法没写全，先给你补全正确的版本：

public function search_mtk($kode_mtk) {
    $this->db->like('kode_mtk', $kode_mtk , 'both');
    $this->db->order_by('kode_mtk', 'ASC');
    $this->db->limit(5);
    // 用result_array()返回数组格式，方便前端处理JSON
    return $this->db->get('m_mata_kuliah')->result_array();
}

这里要确保你的表m_mata_kuliah里包含你需要展示的关联字段（比如nama_mtk课程名、sks学分这类）。

第二步：写好Controller的AJAX接口 #

你需要一个Controller方法来接收前端的搜索请求，调用Model并返回JSON数据：

public function autocomplete_mtk() {
    // 设置返回JSON格式
    header('Content-Type: application/json');
    
    // jQuery Autocomplete默认传的搜索参数是term
    $kode_mtk = $this->input->get('term');
    if (empty($kode_mtk)) {
        echo json_encode([]);
        return;
    }
    
    // 替换成你的Model名称（比如MataKuliah_model）
    $search_result = $this->mata_kuliah_model->search_mtk($kode_mtk);
    echo json_encode($search_result);
}

可以先在浏览器里直接访问这个接口（比如http://你的域名/控制器名/autocomplete_mtk?term=MTK），看看能不能返回正确的JSON数据，这一步能快速排查后端是否正常。

第三步：前端HTML与jQuery配置 #

先准备好HTML结构，包含搜索框和用来展示关联字段的元素：

<input type="text" id="kode_mtk" placeholder="输入课程代码搜索">
<!-- 用来显示关联的课程名称 -->
<div id="nama_mtk_display" style="margin-top:10px;"></div>

然后引入jQuery和jQuery UI（Autocomplete是jQuery UI的组件，必须引入），再写Autocomplete的逻辑：

$(document).ready(function() {
    $('#kode_mtk').autocomplete({
        // 替换成你的Controller接口地址
        source: '<?= base_url("你的控制器名/autocomplete_mtk") ?>',
        minLength: 1, // 输入1个字符就触发搜索
        select: function(event, ui) {
            // ui.item就是你选中的那条数据，这里假设要显示课程名称
            $('#nama_mtk_display').text('选中的课程：' + ui.item.nama_mtk);
            // 如果要展示其他关联字段，比如学分，直接用ui.item.sks即可
            // $('#sks_display').text('学分：' + ui.item.sks);
        }
    });
});

几个容易踩的坑 #

• 依赖引入问题：一定要确保jQuery和jQuery UI的脚本、样式都正确引入了，不然Autocomplete功能直接失效。
• 字段名对应问题：前端ui.item.xxx里的xxx必须和数据库表的字段名完全一致，不然拿不到数据自然显示为空。
• 路由权限问题：如果你的CodeIgniter开启了CSRF防护，记得给这个AJAX接口添加CSRF令牌，或者在配置里允许该接口跳过验证。

内容的提问来源于stack exchange，提问作者uchuneno