html - 如何在 bootstrap 3 typeahead 下拉列表中设置自定义 html 模板

Question

我写了下面的代码:

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

  });

有人提示如何为下拉项设置自定义 html 模板吗？

提前致谢

Answer 1

对于 bootstrap-3-typeahead，我认为你不能使用模板属性。在这种情况下，最好使用 highlighter。示例:

$('#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);
                        });

                    }
                }
                )

因此您可以构建显示的 html 模板。

如果你想保留高亮功能，使用这个正则表达式

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

和

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