添加一些html元素后，typeahead不会从表中获取数据 [英] typeahead doesn't fetch data from the table after adding some html elements

问题描述

我正在尝试对typeahead.js使用自动完成搜索，这是我尝试的代码，它可以正常工作并输出建议列表.

I'm trying to use auto complete search with typeahead.jsand this is the code I tried and its working perfectly and output the suggestion list.

控制器

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

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

Now what I need to do is pass some extra elements with that fetched data , something like relevant url of the product via <a>. So I have updated my code as below.

控制器中的新代码

 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);               
    }

但是，当我在搜索栏控制台中键入文本时，将错误消息作为内部错误，并且它不会输出任何内容.

But when I type a text in the search bar console out put a error message as a internal error and it doesn't output anything.

这是控制台的轻巧

有人可以帮助我吗?谢谢

Could anyone please help me on this. Thanks

UODATE 01

$data = [];时，它会产生以下错误

When $data = []; it generate below error

当

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

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

When

I change $data = []; to $data = '';

in Networks I can see that Network successfully transfer data but no output

修改为 shkory的答案后的更新03

Update 03 after modified as shkory's answer

推荐答案

请尝试不要以HTML格式发送数据，而不要以Json格式发送数据.然后在前端生成任何您想要的内容.

Try not sending data as Html and send as Json. Then generate whatever you wantedm(html) in front end.

在前端自定义模板上选中该模板:

Check this one for frontend custom Template:

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

这篇关于添加一些html元素后，typeahead不会从表中获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！