基于数据库的jQuery多值自动完成文本框实现问题求助

我想复刻jQuery UI的多值自动完成文本框功能，支持在文本框中多选数据并以下拉形式展示可选内容，但从数据库获取数据的前后端代码无法正常运行，以下是问题排查和修复方案：

前端代码修复 #

原前端存在多处语法错误和逻辑问题，修复后的完整代码如下：

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<input id="names" size="50">

<script>
$(function() {
    // 分割输入值（匹配逗号+任意空白字符）
    function split(val) {
        return val.split(/,s*/);
    }

    // 获取最后一段输入内容
    function extractLast(term) {
        return split(term).pop();
    }

    $('#names').autocomplete({
        minLength: 4,
        source: function(request, response) {
            $.ajax({
                // 修正：URL、请求类型、数据类型添加引号
                url: 'controller/groupnames',
                data: {
                    term: extractLast(request.term)
                },
                dataType: 'json',
                type: 'POST',
                success: function(data) {
                    console.log(data);
                    response(data);
                },
                error: function() {
                    // 修正：备选选项添加引号
                    response($.ui.autocomplete.filter(
                        ['opt1', 'opt2'],
                        extractLast(request.term)
                    ));
                }
            });
        },
        focus: function() {
            // 聚焦时不替换输入框内容
            return false;
        },
        select: function(event, ui) {
            var terms = split(this.value);
            // 移除最后一段输入（正在输入的内容）
            terms.pop();
            // 添加选中的选项
            terms.push(ui.item.value);
            // 添加空字符串，保持输入框结尾的逗号，方便继续输入
            terms.push('');
            // 修正：join参数添加引号，用逗号+空格分隔选项
            this.value = terms.join(', ');
            return false;
        }
    });
});
</script>

关键修复点： #

• 正则表达式修正：split(/,s*/)改为split(/,s*/)，正确匹配逗号后的空白字符
• AJAX参数修正：url、dataType、type参数添加字符串引号，符合JavaScript语法要求
• 错误回调备选选项修正：[opt1,opt2]改为['opt1','opt2']，添加字符串引号
• 选择逻辑修正：terms.push()改为terms.push('')，保持输入框结尾的逗号；terms.join(,)改为terms.join(', ')，添加字符串引号并优化选项分隔格式

后端代码修复 #

原后端未正确提取name字段，也未返回符合要求的字符串数组格式，修复后的代码如下（以CodeIgniter框架为例）：

function groupnames(){
    // 优化SQL：只查询需要的name字段，减少数据传输
    $query = $this->db->query("SELECT name FROM `users`");
    $names = [];
    // 遍历结果集，收集所有name值到数组
    foreach($query->result() as $row){
        $names[] = $row->name;
    }
    // 返回JSON格式的字符串数组
    echo json_encode($names);
    exit; // 终止后续输出，避免破坏JSON格式
}

关键修复点： #

• 优化SQL查询：仅查询name字段，提升查询性能和减少数据传输量
• 收集有效数据：创建空数组存储每个用户的name值，而非直接操作查询结果对象
• 输出正确格式：对收集的name数组进行JSON编码，确保返回前端的是符合要求的字符串数组
• 终止输出：添加exit防止控制器后续输出多余内容，避免破坏JSON结构

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