jQuery Autocomplete无法通过AJAX运行

Question

我已经合并了https://github.com/devbridge/jQuery-Autocomplete的jQuery Autocomplete库

在服务器上（Laravel），我将响应的格式设置如下：

Route::get('/api/v1/products', function() {
    foreach(App\Product::all() as $product) {
        $products[] = [
            'value' => $product->name,
            'data'  => $product->id
        ];
    }

    return response()->json($products)->header("Access-Control-Allow-Origin", "*");
});

这将产生以下响应：

[
{
"value": "Test Product 1",
"data": 1
},
{
"value": "Skateboard",
"data": 23
},
{
"value": "Surfboard",
"data": 24
}
]

为了使库能够使用数据，我使用以下代码：

jQuery('#product-search').autocomplete({
            serviceUrl: '/api/v1/products',
            onSelect: function (suggestion) {
                alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
            }
        });

键入时，控制台将返回此错误：

我已经添加了 Access-Control-Allow-Origin 标头，以确保没有CORS错误。除此之外，我不确定为什么会出现此错误。

我还确保json响应的格式正确。

我想念什么？

Answer 1

错误是您返回响应的方式。您只需返回带有建议的数组，但是，如果您查看source code，则插件需要一个名为suggestions的对象，如下所示：

{"suggestions": [{"value": "xxx", data: 1}, {"value": "xxx", data: 1} /* ... */]}

所以您必须从以下位置更改路线

return response()->json($products)->header("Access-Control-Allow-Origin", "*");

收件人：

return response()->json(['suggestions' => $products])->header("Access-Control-Allow-Origin", "*");