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 wh

Answer 1

After doing some research and pulling almost all my hair out, I finally figured out how to add Fullname, image and username to a typeahead like twitter.

Lets say this is the following structure of each object for your source,

{{ friend.id }}#{{ friend.username }}#{{ friend.imgurl }}#{{ friend.fullname }}

Then all you have to do is write a nice Highlighter, something like this

highlighter: function(item) {
              var parts = item.split('#'),
              html = '
';
              html += '
'
              html += '
';
              html += '
'+parts[3]+' (@'+parts[1]+')'+'
';
              html += '
';
              html += '
';
              return html;
            },

This will easily add the Picture, Full name and Username in Typeahead.