Skip to content

Instantly share code, notes, and snippets.

Embed
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">
</div>
$('#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>')
}
});
@zenithtekla

This comment has been minimized.

Copy link

zenithtekla commented Nov 2, 2015

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

@feeeper

This comment has been minimized.

Copy link

feeeper commented Nov 10, 2015

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

@huglester

This comment has been minimized.

Copy link

huglester commented Apr 19, 2016

Thank you for the Fiddle link.

@vmanickamus

This comment has been minimized.

Copy link

vmanickamus commented Oct 10, 2018

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

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.