How to customize Bootstrap typeahead layout/function for more than just text?

Question

I\'m working on a search functionality for my website and I\'m using Bootstrap\'s typeahead to show the results. So far so good. But what I want is to extend the function so tha

Answer 1

mgadda's answer neatly solves the issue for how to augment rendering items with custom data. Unfortunately this metadata isn't available once an item is selected, because bootstrap's select() method calls your updater() with a value taken from the DOM, not your loaded String:

var val = this.$menu.find('.active').attr('data-value');

One way around this is to set the metadata you need to DOM elements in highlighter(), then find them in your updater(). Since we only needed an integer, we set an ID to the image tag itself, and in updater, find it based on the image tag that's still visible:

$('.your_textboxes').typeahead({
  highlighter: function(item) {
    return('' + item);
  },
  updater: function(val) {
    var klid = $('ul.typeahead li.active:visible a img');
    if (klid && klid.length) {
      klid = klid[0].id.substr(5);
      // do stuff with metadata...
    }
    return(val);
}

Need more metadata? Wrap your highlighter in a span, or add some hidden form fields.

This feels kludgey though. If anyone has a cleaner solution, I'd love to see it.