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

Posted 2023-03-14

【中文标题】添加一些 html 元素后，typeahead 不会从表中获取数据

【英文标题】：typeahead doesn't fetch data from the table after adding some html elements

【发布时间】：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 你现在可以检查一下吗

【参考方案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