CodeIgniter中Select2无法输入搜索及加载数据库数据问题求助

问题根源 #

1. Controller没返回JSON格式数据，反而加载了视图，Select2完全无法解析响应内容
2. 资源加载顺序混乱，可能引发样式/脚本冲突
3. 初始化细节处理不到位，比如用拼接文本作为ID、默认option干扰placeholder显示

1. 优先修改Controller（最关键修复） #

原来的Controller返回视图是错误逻辑，Select2的AJAX请求需要纯JSON响应，直接调整为：

public function searchbus() 
{
    $protitle = $this->input->post('protitle');
    // 空输入时返回空数组，避免无意义的全表查询
    $results = empty($protitle) ? [] : $this->project_model->search_bus($protitle);
    // 直接输出JSON，禁止加载视图
    echo json_encode($results);
    exit; // 确保后续无多余输出干扰响应格式
}

2. Model优化，避免逻辑混乱 #

给Like条件添加分组，防止后续新增Where条件时逻辑冲突，同时增加空参数判断：

public function search_bus($protitle) {
    if (!empty($protitle)) {
        $this->db->group_start();
        $this->db->like('cat_name', $protitle);
        $this->db->or_like('cat_busnum', $protitle);
        $this->db->group_end();
    }
    $query = $this->db->get('assets_category');
    return $query->result();
}

3. 脚本调整，解决交互与数据解析问题 #

调整资源加载顺序，增加错误调试回调，改用数据库主键作为选项ID：

<!-- CSS放页面头部，优先加载样式避免渲染闪烁 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />

<!-- JS放页面底部，确保DOM加载完成后再执行初始化 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryvalidate/1.19.3/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<script>
$(document).ready(function() {
    $('#recipient-name123').select2({
        ajax: {
            url: '<?php echo base_url("projects/searchbus"); ?>',
            type: 'POST',
            dataType: 'json',
            delay: 250,
            data: function(params) {
                return {
                    protitle: params.term || ''
                };
            },
            processResults: function(data) {
                if (!Array.isArray(data)) data = [];
                return {
                    results: $.map(data, function(item) {
                        // 用数据库主键作为ID，避免拼接文本的不确定性
                        const displayText = `${item.cat_name || '无名称'} - ${item.cat_busnum || '无编号'}`;
                        return {
                            text: displayText,
                            id: item.cat_id || displayText
                        };
                    })
                };
            },
            cache: true,
            // 添加错误回调，方便快速定位问题
            error: function(xhr, status, error) {
                console.error('Select2请求出错:', error);
                console.error('服务器返回内容:', xhr.responseText);
            }
        },
        placeholder: '选择巴士',
        minimumInputLength: 1,
        // 解决点击无响应问题：确保容器层级足够，样式兼容form-control
        containerCssClass: 'select2-container form-control',
        dropdownCssClass: 'select2-dropdown'
    });
});
</script>

4. View简化，移除干扰项 #

原来的默认option会干扰Select2的placeholder显示，直接改为空select：

<select name="protitle" class="form-control" id="recipient-name123" required>
</select>

调试技巧（仍有问题时排查） #

1. 按F12打开开发者工具，切换到Network标签：
   • 检查AJAX请求的URL是否正确，状态码是否为200
   • 查看响应内容是否为纯JSON，是否混入HTML代码
2. 切换到Console标签，查看是否有JavaScript报错信息
3. 在Model中添加echo $this->db->last_query(); exit;，复制生成的SQL语句到数据库中执行，验证是否能返回预期数据

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