Symfony 5 Typeahead 搜索 [关闭]

Posted 2023-05-07

【中文标题】Symfony 5 Typeahead 搜索 [关闭]

【英文标题】：Symfony 5 Typeahead search [closed]

【发布时间】：2021-11-18 03:23:12

【问题描述】：

我需要帮助我的javascript，我正在尝试使用typeahead自动创建一个搜索表单，但是目前我在输入中写一些东西时我会得到“未定义”： Undefined

这是我的代码：

$(document).ready(function () 
            var term = $("#tags").val();
            var datas = new Bloodhound(
                datumTokenizer: Bloodhound.tokenizers.whitespace,
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: 
                    url: " path('autocomplete') /%QUERY%",
                    wildcard: "%QUERY%",
                    filter: function (datas) 
                        return $.map(datas, function (data) 
                            return $.map(data, function (item) 
                                console.log(item);
                                return 
                                    item_id: item.id,
                                    item_name: item.name,
                                    item_image: item.image,
                                ;
                            )
                        );
                    ,
                ,
            );
            datas.initialize();
            $("#tags").typeahead(
                 hint: true, ,
                
                    name: "datas",
                    source: datas.ttAdapter(),
                    templates: 
                        suggestion: function (item) 
                            return `<div class='datafetch'><ul><li>$item.name</li></ul></div>`;
                        ,
                    ,
                
            );
        );

，您可以在此处查看我的 controller Controller

console log 当我在输入中写入内容时： console.log

感谢您的帮助！！ :)

【参考方案1】：

从您的 console.log 屏幕中可以看出，属性 item.id 和 item.name 均未定义，仅定义了 item.title 和 item.image。

这就是你得到未定义错误的原因。

【参考方案2】：

我将代码更改为：

 $(document).ready(function () 
            var term = $("#tags").val();
            var datas = new Bloodhound(
                datumTokenizer: Bloodhound.tokenizers.whitespace,
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: 
                    url: " path('autocomplete') /%QUERY%",
                    wildcard: "%QUERY%",
                    filter: function (datas) 
                        return $.map(datas, function (data) 
                            return $.map(data, function (item) 
                                console.log(item);
                                return item;
                            )
                        );
                    ,
                ,
            );
            datas.initialize();
            $("#tags").typeahead(
                 hint: true, ,
                
                    name: "datas",
                    source: datas.ttAdapter(),
                    templates: 
                        suggestion: function (item) 
                            return `<div class='datafetch'><ul><li>$item.title</li></ul></div>`;
                        ,
                    ,
                
            );
        );

现在它开始工作了！ :D

【讨论】：

你能解释一下为什么它现在可以工作了吗？

是的，我刚退回了一件商品