Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
#custom-templates .empty-message {
padding: 5px 10px;
text-align: center;
<div id="custom-templates">
<input class="typeahead" type="text" placeholder="Oscar winners for Best Picture">
$('#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',
suggestion: Handlebars.compile('<div><strong>{{value}}</strong> – {{year}}</div>')

This comment has been minimized.

Copy link

zenithtekla commented Nov 2, 2015

For custom templates and display:
Check out my working mockup example here


This comment has been minimized.

Copy link

feeeper commented Nov 10, 2015

Also you can use custom template without any template engine:


This comment has been minimized.

Copy link

huglester commented Apr 19, 2016

Thank you for the Fiddle link.


This comment has been minimized.

Copy link

vmanickamus commented Oct 10, 2018

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, //'',
        filter: function (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

$('#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,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.