如何通过jQuery Autocomplete从Laravel控制器获取数据实现输入提示？

核心问题 #

1. 后端返回逻辑错误：当前控制器无论请求类型都返回视图，而autocomplete插件需要后端返回JSON格式的匹配数据，而非渲染页面。
2. 前端数据传递错误：JS中直接使用$data无效，PHP变量无法直接在原生JS中访问，需转换为JS可识别的格式。
3. 未实现实时异步搜索：现有代码试图用页面加载时的静态数据，无法满足用户输入时动态获取匹配结果的需求。

修复步骤 #

1. 修改后端控制器代码

区分页面加载请求和AJAX请求，AJAX请求时返回JSON格式的匹配名称数组：

public function addProducts(Request $request)
{
    // 判断是否为AJAX搜索请求
    if ($request->ajax()) {
        $word = $request->input('name');
        // 提取匹配的名称并转为一维数组
        $data = itemsNames::select('i_name')
            ->where('i_name', 'like', '%' . $word . '%')
            ->pluck('i_name')
            ->toArray();
        
        return response()->json($data);
    }

    // 非AJAX请求，返回页面视图
    return view('admin.settings.products.addProduct');
}

2. 修改前端JS代码

使用插件的AJAX数据源配置，实现实时请求后端获取匹配结果：

$(function () {
    $("#tags").autocomplete({
        serviceUrl: "/你的实际路由地址/addProducts", // 替换为控制器对应的路由
        paramName: "name", // 和后端接收的参数名保持一致
        transformResult: function(response) {
            // 转换后端返回的JSON数组为插件要求的格式
            return {
                suggestions: $.map(JSON.parse(response), function(item) {
                    return { value: item, data: item };
                })
            };
        }
    });
});

备选方案：静态数据加载（一次性获取所有名称）

若不需要实时搜索，可一次性加载所有名称，修改视图中的JS代码：

$(function () {
    // 将PHP数据转换为JS数组
    var availableTags = {!! json_encode($data->pluck('i_name')->toArray()) !!};
    $("#tags").autocomplete({
        source: availableTags
    });
});

同时调整控制器，页面加载时传递所有数据：

public function addProducts(Request $request)
{
    $data = itemsNames::select('i_name')->get();
    return view('admin.settings.products.addProduct', compact('data'));
}

额外注意事项 #

• 确保已正确引入jQuery和devbridge Autocomplete的JS/CSS文件。
• 检查路由配置，确保AJAX请求能正确到达addProducts方法。
• 若使用AJAX方式，注意处理可能存在的跨域问题。

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