CodeIgniter+MySQL环境下JQuery Autocomplete功能失效排查求助

我来帮你一步步排查这个Autocomplete的问题，结合你的代码来看，有几个关键地方可能出了问题：

1. jQuery UI Autocomplete 默认字段名不匹配 #

jQuery UI的Autocomplete组件默认期望返回的JSON数组包含label（下拉显示文本）和value（选中后填充值）字段，但你当前返回的是自定义的labelnama，这会导致组件无法识别要展示的内容。

修复方案： #

修改控制器里的数组键名，改用默认字段：

public function DataPPAT() {
    $nm = $this->input->get('term'); // 用CI输入类获取参数更安全
    $arr_result = []; // 先初始化空数组，避免无结果时报错
    if (!empty($nm)) {
        $result = $this->BrowseAkun_m->DataPPAT_m($nm);
        foreach ($result as $row) {
            $arr_result[] = array(
                'label' => $row->nama, // 下拉列表显示的文本
                'value' => $row->nama  // 选中后填充到输入框的值
            );
        }
    }
    echo json_encode($arr_result);
}

如果一定要保留自定义字段名，需要在JS里手动映射字段：

$('#namapenerima').autocomplete({
    source: "<?php echo site_url('BackOffice/DataPPAT');?>",
    select: function(event, ui) {
        event.preventDefault(); // 阻止默认填充value的行为
        $('[name="namapenerima"]').val(ui.item.labelnama);
    },
    focus: function(event, ui) {
        event.preventDefault(); // 聚焦时也用自定义字段
        $('[name="namapenerima"]').val(ui.item.labelnama);
    },
    // 告诉组件用哪个字段当label和value
    response: function(event, ui) {
        ui.content = ui.content.map(item => ({
            label: item.labelnama,
            value: item.labelnama,
            labelnama: item.labelnama
        }));
    },
    minLength: 1 // 输入至少1个字符才触发请求
});

2. 必须确保DOM加载完成后初始化组件 #

你提到测试静态数据时加$(document).ready就失效，大概率是脚本加载顺序问题：比如你的自定义脚本写在页面头部，而DOM元素还没渲染出来，导致找不到#namapenerima。

正确的初始化方式： #

确保脚本加载顺序是「jQuery → jQuery UI → 你的自定义脚本」，并把初始化代码放在$(document).ready里：

<!-- 先加载jQuery -->
<script src="path/to/jquery.min.js"></script>
<!-- 再加载jQuery UI -->
<script src="path/to/jquery-ui.min.js"></script>
<!-- 最后加载自定义脚本 -->
<script type="text/javascript">
$(document).ready(function() {
    $('#namapenerima').autocomplete({
        source: "<?php echo site_url('BackOffice/DataPPAT');?>",
        select: function(event, ui) {
            $('[name="namapenerima"]').val(ui.item.label);
        },
        minLength: 1
    });
});
</script>

如果还是报错，打开浏览器控制台（F12）看是否有Uncaught TypeError: $(...).autocomplete is not a function——这说明jQuery UI没有正确加载，或者加载顺序颠倒了。

3. 验证控制器的响应是否正确 #

直接访问控制器URL（比如http://你的域名/BackOffice/DataPPAT?term=测试名字），检查返回的JSON格式是否符合要求：

• 正确格式示例：[{"label":"张三","value":"张三"},{"label":"李四","value":"李四"}]
• 如果返回空白/错误，检查：
  • CI的路由是否正确，确保BackOffice/DataPPAT能访问到目标方法
  • 是否开启了CSRF保护，如果开启，需要在AJAX请求中携带CSRF Token，或者把该方法加入CSRF白名单

4. 检查模型的查询逻辑 #

确认模型的SQL查询是否能返回预期结果：

function DataPPAT_m($nm) {
    $this->db->like('nama',$nm,'both');
    $this->db->order_by('nama', 'ASC');
    $this->db->limit(10);
    // 打印SQL语句验证（测试完记得删除）
    echo $this->db->get_compiled_select('ppat');
    return $this->db->get('ppat')->result();
}

把打印出的SQL手动在数据库中执行，看是否能查询到数据，同时确认表名ppat、字段nama是否存在且拼写正确。

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