我写了以下代码:
$('#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模板。
如果要保留突出显示功能,请使用此regexp
var name = parts[1].replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
return '<strong>' + match + '</strong>'
});
和
html += '<div class="text-left">' + name + '</div>';