添加一些 html 元素后，typeahead 不会从表中获取数据答案

【问题标题】：typeahead doesn't fetch data from the table after adding some html elements添加一些 html 元素后，typeahead 不会从表中获取数据
【发布时间】：2020-01-19 18:22:51
【问题描述】：

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

控制器

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

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

控制器中的新代码

 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 = '';`

在 Networks 中我可以看到 Network 成功传输数据但没有输出

修改为shkory's answer后更新03

【问题讨论】：

点击此链接并在此处添加错误
@ShokryMohamed 你现在可以检查一下吗

标签： html json laravel autocomplete typeahead.js

【解决方案1】：

尽量不要以 Html 形式发送数据而以 Json 形式发送。然后在前端生成任何你想要的m(html)。

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

抱歉，第 87 行没有 $data = []
在第 87 行将 $data. 更改为 $data[]
完成，现在它显示建议，但所有 html 标记。请参考update02
你现在想要什么？您在 $data 中发送了 html

我将$data = []; 更改为$data = '';

我将`$data = [];` 更改为`$data = '';`