Symfony 5 Typeahead 搜索 [关闭]

Question

我需要帮助我的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

感谢您的帮助！！ :)

Answer 1

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

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

Answer 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