Example for http://twitter.github.io/typeahead.js/examples/.

custom-templates.css

#custom-templates .empty-message {
  padding: 5px 10px;
 text-align: center;
}

custom-templates.html

<div id="custom-templates">
  <input class="typeahead" type="text" placeholder="Oscar winners for Best Picture">
</div>

custom-templates.js

$('#custom-templates .typeahead').typeahead(null, {
  name: 'best-pictures',
  display: 'value',
  source: bestPictures,
  templates: {
    empty: [
      '<div class="empty-message">',
        'unable to find any Best Picture winners that match the current query',
      '</div>'
    ].join('\n'),
    suggestion: Handlebars.compile('<div><strong>{{value}}</strong> – {{year}}</div>')
  }
});

For custom templates and display:
Check out my working mockup example here http://jsfiddle.net/w03a28h9/40

Also you can use custom template without any template engine: https://jsfiddle.net/d8p0wv2w/2/

Thank you for the Fiddle link.

Hi,
I am trying the same example, with out REST API URL to read data from Share Point repository, I am not getting any results, Nether any error is being thrown.

$(document).ready(function () {

var  projects = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: appconfig.MaterdataUrlforSearchItems, //'http://api.themoviedb.org/3/search/movie?query=%QUERY&api_key=f22e6ce68f5e5002e71c20bcba477e7d',
        filter: function (data) {
            console.log(data);
            // Map the remote source JSON array to a JavaScript object array
            return $.map(data.d.results, function (project) {
                return {	                
                    value: project.LinkTitle + " | " + project.Project_x0020_Name,
                    description: "Award" + " | " + project.CustCMSContractStatus 	                  
                };
            });
        }
    },
    limit: 10
});
projects.initialize();

$('#vine-search .typeahead').typeahead(null, {
    displayKey: 'value',
    source: projects.ttAdapter(),
    templates: {
        suggestion: Handlebars.compile("{{value}}<br><span class='desc'>{{description}}</span><br><span style='font-size:12px;color:#999'>Source - "), // + SearchEntitiesConfig.EntityDataSources[utils.getAttributewithoutPipe({{description}})] + "</span>"),
       // "<p style='padding:6px'><b>{{value}}</b> -  {{description}} </p>"),
        footer: Handlebars.compile("<b>Searched for '{{query}}'</b>")
    }
});

});

Please let me know if I am missing any info. Thanks,
Valar

Thank you for the link.