Symfony 5 Typeahead search

Question

I need help for my javascript, I'm trying to create a search form with autocompletion with typeahead, but for the moment I'm getting "undefined" when I write something in the input : Undefined

This is my code :

$(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>`;
                        },
                    },
                }
            );
        });

And you can see my controller here : Controller

The console log when I write something in the input : console.log

Thanks for your help !! :)

Answer 1

I changed my code to :

 $(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>`;
                        },
                    },
                }
            );
        });

And now it's working ! :D

Answer 2

As seen in the screen of your console.log neither the property item.id nor item.name is defined, only item.title and item.image is defined.

thats why you get the undefined error.