Adding Label, value and picture in Bootstrap's Typeahead

Question

I am playing around with Typeahead and I am trying to figure out if there is a way to display Pictures and Labels in the search query as well? Something like how Twitter does when we try to mention users on Tweets.

Answer 1

highlighter is not working anymore.

Use templates, example:

var my_friends = [
     {name: "John", picture: "http://..."}
    ,{name: "Mel", picture: "http://..."}
];

var friends = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: my_friends
});
friends.initialize();
$('#friend_name').typeahead(
    {
        hint: true,
        highlight: true,
        minLength: 1,
    },
    {
        name: 'friends',
        displayKey: 'name',
        source: friends.ttAdapter(),
        templates: {
            empty: 'not found', //optional
            suggestion: function(el){return '<img src="'+el.picture+'" />'+el.name}
        }
    }
);

Source: https://gist.github.com/jharding/9458780#file-custom-templates-js