How to install custom html template in bootstrap 3 boot list

Question

I wrote the following code:

$('#pretraga').typeahead({ hint: true, highlight: true, minLength: 2 }, { name: 'kategorije', displayKey: 'value', // `ttAdapter` wraps the suggestion engine in an adapter that // is compatible with the typeahead jQuery plugin source: kategorije.ttAdapter() }); 

Does anyone have a hint on how to set up a custom html template for dropdowns?

Thank you in advance

Answer 1

With bootstrap-3-typeahead, I think you cannot use the template property. In this case, it is better to use highlighter . Example:

 $('#employees').typeahead({ highlighter: function (item) { var parts = item.split('#'), html = '<div class="typeahead">'; html += '<div class="pull-left margin-small">'; html += '<div class="text-left"><strong>' + parts[0] + '</strong></div>'; html += '<div class="text-left">' + parts[1] + '</div>'; html += '</div>'; html += '<div class="clearfix"></div>'; html += '</div>'; return html; }, source: function (query, process) { var employees = []; return $.post('employee/search', { query: '%' + query + '%' }, function (data) { // Loop through and push to the array $.each(data, function (i, e) { employees.push(e.name + "#" + e.number); }); // Process the details process(employees); }); } } ) 

So you can create a displayed html template.

If you want to keep the highlight function use this regex

 var name = parts[1].replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) { return '<strong>' + match + '</strong>' }); 

and

  html += '<div class="text-left">' + name + '</div>'; 

Answer 2

You can try

  { name: 'kategorije', displayKey: 'value', // `ttAdapter` wraps the suggestion engine in an adapter that // is compatible with the typeahead jQuery plugin source: kategorije.ttAdapter(), template: /* html template here, {{name}} to use "data".name*/ 

})

Answer 3

Try it. In addition, you need to add Handlebars.js (for the template) to your project.

 $('#pretraga').typeahead({ hint: true, highlight: true, minLength: 2 }, { name: 'kategorije', displayKey: 'value', source: kategorije.ttAdapter(), templates: { empty: [ '<div class="empty-message">', '-', '</div>' ].join('\n'), suggestion: Handlebars.compile('<div class="row col-sm-12 col-lg-12 "><a>' + '<div><div class="pull-left row col-sm-12 col-lg-2">' + '<span>' + '<img src="{{picture.data.url}}">' + '</span></div>' + '<div class="col-sm-12 col-lg-10"><span>{{name}} - ({{category}}) - <small style="color:#777;">({{id}})</small>' + '</br><small style="color:#777;">({{location.street}} , {{location.city}} , {{location.country}})</small></span>' + '</div></div>' + '<div class="pull-right">' + '<span class="id"><b>{{likes}}</b></span><span> <strong>Likes</strong></span>' + '</div>' + '</a></div>') } });