使用jQuery UI Autocomplete时输入值传参为null的问题

你遇到的核心问题很明确：前端AJAX请求传递的参数名，和后端代码试图获取的参数名完全不匹配，这才导致后端拿到的$name始终是null。

具体原因拆解 #

看你的JavaScript代码：

data: { term: request.term },

这里你把输入框的内容以term作为键名发送给了后端，但在PHP的search方法里，你却在尝试获取名为product-name的参数：

$name = $request->get('product-name');

这就好比你给快递填了收件人叫“张三”，却跑去问快递员有没有“李四”的包裹，自然找不到。你用$request->all()看到的["term" => "ban"]就是最直接的证据——后端确实收到了参数，只是你找错了名字而已。

两种可行的修正方案 #

你可以任选一种方案来解决这个问题：

方案一：修改后端代码（推荐）

既然jQuery UI Autocomplete的默认请求参数就是term，我们直接后端适配这个参数名即可，同时还能优化一下返回逻辑（没必要先转成JSON字符串再传给response()->json）：

public function search(Request $request) {
    $name = $request->get('term'); // 把参数名改成term
    Debugbar::info($name);
    $result = DB::table('products')
                ->select('id', 'name')
                ->where('name', 'LIKE', '%' . $name . '%')
                ->limit(25)
                ->get();
    return response()->json($result); // 直接传集合，response()->json会自动转成JSON
}

方案二：修改前端JS代码

如果你更希望参数名和输入框的name属性保持一致，可以修改AJAX的data部分，同时优化前端的JSON解析逻辑（后端返回的已经是JSON，不需要手动JSON.parse）：

$(document).ready(function() {
    $( "#product-name" ).autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "add/search",
                data: { 'product-name': request.term }, // 把参数名改成product-name
                dataType: "json",
                success: function (data) {
                    var resp = $.map(data, function (obj) { // 去掉多余的JSON.parse
                        return { label: obj.name, value: obj.id }
                    });
                    response(resp);
                }
            });
        },
        minLength: 2
    });
});

补充提示 #

两种方案都能解决问题，但更推荐方案一，因为它符合jQuery UI Autocomplete组件的默认行为，后续其他开发者维护代码时也更容易理解，不需要额外适配自定义参数名。

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