Symfony 5 Typeahead 搜索

Question

我的 javascript 需要帮助，我正在尝试创建一个带有预输入自动完成功能的搜索表单，但目前当我在输入中写一些东西时，我得到了“未定义”： 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

控制台日志 当我在输入中写一些东西时： 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

Symfony 5 Typeahead 搜索

Symfony 5 Typeahead search

javascript

bloodhound