添加一些 html 元素后，typeahead 不会从 table 获取数据

Question

我正在尝试通过 typeahead.js 使用自动完成搜索，这是我尝试过的代码，它运行良好并输出建议列表。

控制器

 public function autocomplete(Request $request){
            $data = Product::select("name")
                    ->where("name","LIKE","%{$request->input('name')}%")->get(); 
                    return response ()->json($data);
        }

现在我需要做的是通过获取的数据传递一些额外的元素，例如通过 <a> 与产品相关的 url。所以我更新了我的代码如下。

控制器中的新代码

 public function autocomplete(Request $request){
        $products = Product::
        where("name","LIKE","%{$request->input('name')}%")->get(); 
        $setting = 157.5;
        $data = [];
        foreach ($products as $product){

            $data .= ' <li><a href="'.route('shop.product.listings',['id'=>$product->id,'slug'=>$product->getSlug()]).'"><h1>'.$product->name.'</h1><p>'.number_format(($product->minimum_price)*$setting->value, 2, '.', ',').' LKR</p></a></li>';
        }
                return response ()->json($data);               
    }

但是当我在搜索栏控制台中输入文本时，输出了一条 错误消息作为内部错误，但它没有输出任何内容。

这是控制台的截图

谁能帮我解决这个问题。谢谢

UODATE 01

当$data = [];时产生以下错误

当

我在网络中将`$data = [];`更改为`$data = '';`

时，我可以看到网络成功传输数据但没有输出

更新03后修改为shkory's answer

Answer 1

return $data = []; 并将 $data. 更改为 $data[] 在第 87 行

Answer 2

尝试不以 Html 发送数据，而是以 Json 发送数据。然后在前端生成任何你想要的m(html)。

检查这个前端自定义模板：

`https://codepen.io/jeremejazz/pen/QyOWmq`

添加一些 html 元素后，typeahead 不会从 table 获取数据

typeahead doesn't fetch data from the table after adding some html elements

html

json

autocomplete

laravel

typeahead.js

我在网络中将`$data = [];`更改为`$data = '';`

添加一些 html 元素后，typeahead 不会从 table 获取数据

typeahead doesn't fetch data from the table after adding some html elements

html

json

autocomplete

laravel

typeahead.js

我在网络中将$data = [];更改为$data = '';

我在网络中将`$data = [];`更改为`$data = '';`