How To Display Images With Typeahead.js?

How to display images with typeahead.js? I am trying to display images for profiles into the list that is created by typehead.js. At this moment I can only return texts, as you see

Solution 1:

You can create template for suggestion:

$('#search-keywords-page').typeahead({hint:true,highlight:true,minLength:1},
{
  name:'profiles',
  source:profiles,
  templates: {
      suggestion:Handlebars.compile('<div><imgsrc="{{image}}" />{{title}} - {{nid}}</div>')
  }
});

Only return correct json from Your backend:

$array_test[$key] = array(
  'title' => $value->title,
  'nid' => $value->nid,
  'image' => $author_image_petite_url
);