var data = [{
id: 0,
text: 'enhancement',
html: '<div style="color:green">enhancement</div>'
}, {
id: 1,
text: 'bug',
html: '<div style="color:red">bug</div><div><small>This is some small text on a new line</small></div>'
}];
function template(data) {
return data.html;
}
$("select").select2({
data: data,
templateResult: template,
escapeMarkup: function(m) {
return m;
}
});
function template(data) {
if ($(data.html).length === 0) {
return data.text;
}
return $(data.html);
}
$("select").select2({
ajax: {
url: 'routeurl',
dataType: 'json',
type: 'POST',
processResults: function(data) {
return {
results: data
};
},
cache: true
},
allowClear: true,
placeholder: 'Select at least one element',
templateResult: template,
templateSelection: template
});
格式为json的端点结果,如
[{
id: 0,
text: 'enhancement',
html: '<div style="color:green">enhancement</div>'
}, {
id: 1,
text: 'bug',
html: '<div style="color:red">bug</div><div><small>This is some small text on a new line</small></div>'
}, {
id: 2,
text: 'success',
html: 'Success'
}]
8条答案
按热度按时间axr492tv1#
好的,我玩了一会儿,找到了一个可行的解决方案,所以我在这里回答我自己的问题。
对我来说,这里的关键是构建一个包含
templateSelection
和templateResult
内容的数据数组。后者在下拉列表中呈现得很好,但任何多行内容都不会包含在select2元素中,因此需要内联显示(或至少在一行上显示)。将escapeMarkup
定义为选项允许覆盖通常会剥离html内容的核心函数。定义
title
属性也很重要,否则工具提示中会出现html标记。第一个
或者,通过一些小的CSS调整,您可以允许完整的html选项内容显示在select容器中,而无需模板回调:
第一个
bwitn5fc2#
如果我没有弄错的话,只有设置了templateResult和templateSelection选项并让它们返回一个jQuery对象,才能呈现HTML。
第一个
x759pob23#
只需将另一个带有html的字段添加到数据数组中,然后使用
templateResult
选项创建自己的模板,如下所示JSFiddle Demo
的第一个字符qc6wkl3g4#
另一个例子定义如下
格式为json的端点结果,如
sulc1iza5#
@EatenByAgrue发布的答案的附录
如果需要搜索
text
(在提供的示例中为enhancement
和bug
)AND以及html
内容(例如This is some small text
),则需要扩展匹配逻辑,如official documentation中所示。例如:
第一个
plicqrtu6#
使用
打开XSS漏洞(https://codepen.io/nkorovikov/pen/ZEBdMBP)
我没有找到一种方法来使用模板处理数组中的数据,但是模板可以很好地处理 AJAX 中的数据,并且可以直接向HTML中添加select元素
(https://codepen.io/SitePoint/pen/bELxVw)
ahy6op9u7#
将select2控件中的text属性更改为HTML:
参考:https://codepen.io/kohnmd/pen/KwYvvM
b1uwtaje8#
这里有一个使用jQuery的替代选项