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

发布时间：2020-12-18 00:25:20 所属栏目：安全来源：网络整理

导读：我写了以下代码： $('#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

我写了以下代码：

$('#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模板吗？

先感谢您

解决方法

使用bootstrap-3-typeahead我认为你不能使用template属性.在这种情况下最好使用荧光笔.例：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!