CodeIgniter中jQuery自动补全（逗号分隔文本）功能失效问题

先帮你梳理下现有代码里的坑，再给出完整的修复方案：

一、后端代码的核心问题 #

你的search_json.php存在几个致命问题：

• 返回内容不是纯JSON：你用<pre>和print_r包裹了JSON输出，这会让响应里混入HTML标签，jQuery Autocomplete根本无法解析这种非标准的JSON，直接导致功能失效。
• 数组未初始化：$menu变量在foreach循环前没有声明为空数组，如果数据库查询结果为空，会抛出"Undefined variable: menu"的错误，彻底破坏JSON输出。
• CI环境加载问题：如果search_json.php是直接访问的独立文件，没有引入CodeIgniter的入口文件，get_instance()根本获取不到CI实例，数据库查询直接失败。

二、前端代码的问题 #

你提供的JS代码不完整——jQuery Autocomplete默认是处理单个输入值的，要实现逗号分隔的补全，必须自定义source和select回调来拆分、合并输入内容，这部分逻辑缺失也是功能失效的原因。

修复后的完整方案 #

第一步：把后端改成CI控制器方法（推荐）

不要用独立PHP文件，直接在CI里创建控制器，确保框架环境正常加载：

创建application/controllers/Search.php：

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Search extends CI_Controller {

    public function get_menu_json() {
        // 先初始化空数组，避免无数据时报错
        $menu = [];
        
        // 可选：接收前端传的关键词做模糊搜索，提升性能
        $term = $this->input->get('term');
        $this->db->select('id, menu_name');
        $this->db->from('top_menu');
        if (!empty($term)) {
            $this->db->like('menu_name', $term);
        }
        $this->db->order_by('menu_name');
        $query = $this->db->get();
        
        if ($query->num_rows() > 0) {
            foreach($query->result_array() as $row) {
                $menu[] = [
                    'id' => $row["id"],
                    'label' => $row["menu_name"],
                    'value' => $row["menu_name"] // 必须加value字段，Autocomplete默认依赖这个
                ];
            }
        }
        
        // 设置响应头为JSON，确保前端正确解析
        $this->output
            ->set_content_type('application/json')
            ->set_output(json_encode($menu));
    }
}

访问路径为：http://你的域名/index.php/search/get_menu_json，返回的是纯标准JSON。

第二步：前端实现逗号分隔的补全逻辑

确保引入jQuery和jQuery UI（Autocomplete是jQuery UI的组件），然后写完整的回调逻辑：

<!-- 先引入依赖 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

<!-- 输入框 -->
<input type="text" id="menu_input" placeholder="输入菜单名称，用逗号分隔">

<script>
$(function(){
    $('#menu_input').autocomplete({
        source: function(request, response) {
            // 拆分输入内容，只对最后一段文本做补全
            var searchTerm = request.term.split(',').pop().trim();
            $.ajax({
                url: '<?php echo base_url("search/get_menu_json"); ?>',
                dataType: 'json',
                data: {
                    term: searchTerm // 传给后端做模糊搜索
                },
                success: function(data) {
                    response(data);
                }
            });
        },
        select: function(event, ui) {
            // 合并已输入内容和选中的选项
            var currentContent = $(this).val().split(',');
            currentContent.pop(); // 移除最后一段未完成的输入
            currentContent.push(ui.item.value); // 添加选中的菜单名
            $(this).val(currentContent.join(', ') + ', '); // 加上逗号空格，方便继续输入
            return false; // 阻止Autocomplete默认的替换行为
        },
        focus: function(event, ui) {
            return false; // 聚焦选项时不替换输入框内容
        },
        minLength: 1 // 输入1个字符就触发补全
    });
});
</script>

额外注意事项 #

1. 确保你的CodeIgniter已经配置好数据库连接，top_menu表存在且字段正确。
2. 如果你的CI开启了URL重写，访问路径可以去掉index.php。
3. 测试时可以直接访问后端接口URL，确认返回的是纯JSON，没有任何HTML标签或错误信息。

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