Looking at the documentation, you can see that the name is templates
and not template
- like in you show in your second example. The issue you have there is that suggestion
needs to be a function, not a string. In the bottom example of custom templates you can see they use Handlebars.compile
which returns a function which takes a single parameter containing the data to render a template with - and returns a string that is the generated HTML. If you do not want to use Handlebars
you could do something like (please note that for simplicity I do not escape the data in my example. For a proper solution you should escape data.value
and data.id
to make sure you do not introduce XSS vulnerabilities):
$('input').typeahead(null, {
name: 'countries',
displayKey: 'value',
source: countries.ttAdapter(),
templates: {
empty: [
'<div class="empty-message">',
'no results found',
'</div>'
].join('\n'),
suggestion: function(data){
return '<p><strong>' + data.value + '</strong> - ' + data.id + '</p>';
}
},
engine: Hogan
});