Twiiter Typeahead Custom Templates - Getting Default Example Working

I am having trouble getting the default Twitter typeahead custom template working found here: http://twitter.github.io/typeahead.js/examples/#custom-templates I am able to get the

Solution 1:

Try using Bloodhound , returning object bestPictures as a property accessible at .typeaheadsuggestions function

jQuery(document).ready(function() {

  var bestPictures = [{
    "year": "1996",
    "value": "Tom",
    "url": "http://example.com"
  }, {
    "year": "1998",
    "value": "Tim",
    "url": "http://example.com"
  }];

  var pictures = newBloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: $.map(bestPictures, function(d) {
      return {
        value: d.value,
        // pass `bestPictures` to `suggestion`suggest: d
      }
    })
  });

  pictures.initialize();

  $("#custom-templates .typeahead").typeahead(null, {
    name: "best-pictures",
    display: "value",
    source: pictures.ttAdapter(),
    templates: {
      notFound: [
        "<div class=empty-message>",
        "unable to find any Best Picture winners that match the current query",
        "</div>"
      ].join("\n"),
      suggestion: function(data) {
        // `data` : `suggest` property of object passed at `Bloodhound`return"<div><strong>" + data.suggest.value + "</strong>" 
               + data.suggest.year + "</div>"
      }
    }
  });
});

<scriptsrc="http://code.jquery.com/jquery-1.11.2.min.js"></script><scriptsrc="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script><divid="custom-templates"><inputtype="text"class="typeahead"placeholder="Best picture winners" /></div>