javascript - How to display multiple returned values in suggestion in twitter typeahead/bloodhound? -

im trying use bloodhound , typeahead create autocomplete. data being returned correctly displayed in options undefined code is:

html:

<form class="typeahead" role="search">        <div class="form-group">             <input type="search" name="q" class="form-control search-input" placeholder="search" autocomplete="off">        </div> </form> 

javascript:

var engine = new bloodhound({                 remote: {                     url: '{{ route('search') }}?query=%query',                     wildcard: '%query'                 },                 datumtokenizer: bloodhound.tokenizers.whitespace('name'),                 querytokenizer: bloodhound.tokenizers.whitespace             });              $(".search-input").typeahead({                 hint: true,                 highlight: true,                 minlength: 1             }, {                 source: engine.ttadapter(),                  // appended "tt-dataset-" form class name of suggestion menu.                 name: 'profilelist',                  // key array want display (name,slug...)                 templates: {                     empty: [                         '<div class="list-group search-results-dropdown"><div class="list-group-item">nothing found.</div></div>'                     ],                     header: [                         '<div class="list-group search-results-dropdown">'                     ],                     suggestion: function (data) {                         var profile = [];                         profile.push(data);                         console.log(profile);                          return '<a href="' + data.slug + '" class="list-group-item">' + data.name + '</a>'                     }                 }             }); 

when console.log(data) 2 results this:

hello molly hello-molly-436057803095647 

but values displayed undefined. data returned backend looks like:

{"name":"hello molly","slug":"hello-molly-436057803095647"} 

i want display name , slug this: return '<a href="' + data.slug + '" class="list-group-item">' + data.name + '</a>' suggestion. how can that?

for else gets stuck had create transform function:

transform: function(response) {                     return $.map(response, function (profile) {                         return {                             name: profile.name,                             slug: profile.slug                         }                     });                 }, 

to map out json response. if using lot of browser caching clear cache can stop javascript updating.

full code:

var engine = new bloodhound({                 remote: {                     url: '{{ route('search') }}?query=%query',                     wildcard: '%query',                     transform: function(response) {                         return $.map(response, function (profile) {                             return {                                 name: profile.name,                                 slug: profile.slug                             }                         });                     },                 },                 datumtokenizer: bloodhound.tokenizers.whitespace('name', 'slug'),                 querytokenizer: bloodhound.tokenizers.whitespace              });              engine.initialize();              $(".search-input").typeahead({                 hint: true,                 highlight: true,                 minlength: 1,                 displaykey: 'name',             }, {                 source: engine.ttadapter(),                  // appended "tt-dataset-" form class name of suggestion menu.                 name: 'profilelist',                  // key array want display (name,id,email,etc...)                 templates: {                     empty: [                         '<div class="list-group search-results-dropdown"><div class="list-group-item">nothing found.</div></div>'                     ],                     header: [                         '<div class="list-group search-results-dropdown">'                     ],                     suggestion: function (data) {                         return '<a href="' + data.slug + '" class="list-group-item">' + data.name + '</a>'                     }                 }             });