How to set custom html template in bootstrap 3 typeahead dropdownlist

Question

I have wrote 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 someone has a hint how to set custom html template for dropdown items?

Thank you in advance

Jameljamerson

Answer 1

With bootstrap-3-typeahead I think you can't use the template property. In this case 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 build the html template that is shown.

If you want to keep the highlight feature, use this regexp

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

and

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

Mozarab

Answer 2

You could 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*/

})

Ark

Answer 3

Try like this. Also, 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>')
    }
});

Mercenary