How to display images with typeahead.js?

Question

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 there:

Here is what my javascript looks like:

And my PHP code, where I construct the profiles list:

The JSON $json_array_test looks like that:

Any idea how to achieve that?

Answer 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><img src="{{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
);