CodeIgniter中Autocomplete文本框无法正常工作问题咨询

看起来你在CodeIgniter里遇到了Autocomplete文本框无法正常工作的问题，结合你给出的控制器代码，我来帮你梳理几个关键的排查和修复点：

1. 完善控制器的JSON输出逻辑 #

你给出的get_tutorial方法最后是echo json...，明显没写完，而且直接echo JSON容易出现响应头不正确、多余输出的问题。建议改用CodeIgniter的输出类来规范输出：

public function get_tutorial(){
    // 接收前端传来的关键词
    $keyword = $this->input->post('keyword');
    // 调用模型获取数据
    $data = $this->Main_tutorial->getrow($keyword);
    
    // 正确设置JSON响应头并输出数据
    $this->output
        ->set_content_type('application/json')
        ->set_output(json_encode($data));
}

2. 确保模型查询逻辑正确 #

你的Main_tutorial模型的getrow方法需要正确执行模糊查询，并且返回符合前端需求的数组格式。举个示例：

class Main_tutorial extends CI_Model {
    public function getrow($keyword){
        // 假设你要查询的表是`tutorials`，匹配字段是`title`
        // 用like做模糊查询，自动处理SQL注入
        $this->db->like('title', $keyword);
        $query = $this->db->get('tutorials');
        
        // 返回二维数组，方便前端处理
        return $query->result_array();
    }
}

3. 前端Autocomplete的正确配置 #

以常用的jQuery UI Autocomplete为例，前端代码需要正确发起AJAX请求，并且处理返回的JSON数据：

<!-- 你的Autocomplete输入框 -->
<input type="text" id="tutorial-search">

<!-- 引入依赖的JS和CSS -->
<script src="https://code.jquery.com/jquery-3.6.4.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">

<script>
$(function() {
    $("#tutorial-search").autocomplete({
        minLength: 2, // 输入至少2个字符才触发搜索
        source: function(request, response) {
            $.ajax({
                url: "<?php echo site_url('welcome/get_tutorial'); ?>", // 正确的控制器方法URL
                type: "POST",
                data: {
                    keyword: request.term, // 传递输入的关键词
                    // 如果开启了CSRF保护，必须带上令牌
                    <?php echo $this->security->get_csrf_token_name(); ?>: "<?php echo $this->security->get_csrf_hash(); ?>"
                },
                dataType: "json",
                success: function(data) {
                    // 把模型返回的数据转换成Autocomplete需要的格式（label和value）
                    var suggestions = $.map(data, function(item) {
                        return {
                            label: item.title, // 显示在下拉列表的文本
                            value: item.title  // 选中后填充到输入框的内容
                        };
                    });
                    response(suggestions);
                },
                error: function(xhr) {
                    // 调试用：查看AJAX请求的错误信息
                    console.log("请求出错：" + xhr.responseText);
                }
            });
        }
    });
});
</script>

常见排查步骤 #

如果还是不行，你可以按下面的步骤调试：

• 检查AJAX请求：打开浏览器开发者工具（F12）的Network标签，查看请求的URL是否正确、参数是否传递、返回的状态码是否为200，返回的内容是否是有效的JSON。
• 验证模型返回数据：在控制器的get_tutorial方法里临时加var_dump($data); exit;，看看模型是否返回了预期的数据。
• 排查CSRF问题：如果你的CodeIgniter开启了csrf_protection，一定要确保AJAX请求带上了CSRF令牌，否则会返回403错误。
• 检查多余输出：确保控制器和模型里没有echo、var_dump等多余的输出，否则会破坏JSON格式。

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