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 !! :)
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.
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