如何使用typeahead.js显示图像？

Question

如何使用typeahead.js显示图像？

我正在尝试将配置文件的图像显示在由typehead.js创建的列表中。

此时我只能返回文字，如你所见：

这是我的javascript的样子：

我的PHP代码，我构建了个人资料列表：

JSON $ json_array_test 看起来像这样：

知道如何实现这个目标吗？

Answer 1

您可以为建议创建模板：

$('#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>')
  }
});

只从你的后端返回正确的json：

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