CodeIgniter 3中jQuery自动补全功能出现404 Not Found错误的解决方法

我来帮你一步步排查和修复这个问题：

1. 先解决核心的404问题 #

404本质是服务器找不到请求的路径，优先检查以下配置：

确认base_url和路由配置 #

• 打开application/config/config.php，确保base_url正确设置为你的项目根路径：

  $config['base_url'] = 'http://localhost/apluscollege/';
  

  错误的base_url会让site_url()生成无效的请求地址，直接引发404。

• 检查项目根目录的.htaccess文件（如果没有就新建一个），确保它能正确去除URL中的index.php：

  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ index.php/$1 [L]
  

  没有这个配置的话，浏览器请求college/get_autocomplete时，服务器无法识别对应的CodeIgniter控制器方法，就会返回404。

验证控制器的可访问性 #

• 确认控制器文件是College.php（首字母必须大写），且放在application/controllers/目录下，类名也必须是College（和文件名一致）——这是CodeIgniter 3的强制规范，大小写错误会导致路由失败。
• 确保get_autocomplete方法是public权限（你的代码已经满足，别改成private/protected），否则无法通过URL访问。

测试基础路径 #

直接在浏览器地址栏访问：http://localhost/apluscollege/college/get_autocomplete?term=test

• 如果还是404：回到前面检查.htaccess和base_url，大概率是服务器路由配置问题。
• 如果能看到空白页面或报错：说明路径是通的，接下来修复逻辑问题。

2. 修复控制器中的逻辑错误（虽然不是404原因，但会导致功能失效） #

你的get_autocomplete方法有两个明显的bug：

• 未定义$college_name变量，应该用$row->college_name；
• echo json_encode($arr_result)放在foreach循环内，会多次输出JSON，导致格式错误。

修复后的控制器代码：

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

class College extends CI_Controller { 
    public function __construct() { 
        parent::__construct(); 
        $this->load->model('College_model'); 
    } 

    public function index() { 
        $this->load->view('college_view'); 
    } 

    public function get_autocomplete() { 
        if (isset($_GET['term'])) { 
            $result = $this->college_model->search_college($_GET['term']); 
            $arr_result = []; // 先初始化空数组
            if (count($result) > 0) { 
                foreach ($result as $row) { 
                    $arr_result[] = [ 
                        'name' => $row->college_name, // 修复变量引用
                        'description' => $row->college_description, 
                    ]; 
                } 
            }
            echo json_encode($arr_result); // 移到循环外，只输出一次JSON
        } 
    } 
} 
?>

3. 前端Ajax的小优化 #

jQuery UI Autocomplete默认期望返回label或value字段，你返回的是name，可以在前端指定对应字段，同时优化下拉项的显示：

$(document).ready(function () {
    $('#college').autocomplete({
        source: "<?php echo site_url('college/get_autocomplete'); ?>",
        select: function (event, ui) {
            $('[name="college"]').val(ui.item.name);
            return false;
        },
        focus: function(event, ui) {
            event.preventDefault();
            $(this).val(ui.item.name); // 聚焦时也显示院校名称
        },
        minLength: 2 // 输入至少2个字符才触发请求，减少服务器压力
    }).data("ui-autocomplete")._renderItem = function(ul, item) {
        // 自定义下拉项，同时显示名称和描述
        return $("<li>")
            .append(`<div>${item.name}<br><small>${item.description}</small></div>`)
            .appendTo(ul);
    };
});

按照以上步骤操作，应该能解决404错误，同时让自动补全功能正常工作。

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