我现在使用Select2已经2年了,我真的很喜欢所有的开发。但是,版本3.5.x有他的限制,所以我正在转向版本4.0,这让我很头疼!
为了您的记录,我正在使用带有大表格的Select2(> 10.000条目),因此AJAX&无限数据(页面设置为50个项目)。
使用版本3.5.2,我可以在搜索数据时重现下划线匹配(使用formatSelection
和query.term
)。任何想法如何使用版本4.0.0(功能templateResult
只能通过result
而不是query
?
使用版本3.x,您可以添加使用搜索值的免费条目不在列表中(使用createSearchChoice
)。版本4.0没有这个选项,不知道如何重新制作它?
我尝试用输入栏替换选择栏(仍然使用选择下拉列表)。似乎可以强制适配器,但我无法找到如何。
我需要添加一行(第1行)或按钮(向右浮动)以添加新项目(类似于createTag
,但对于项目)。有人做过吗?
答案 0 :(得分:20)
我强烈建议您在从Select2 3.5.2迁移到Select2 4.0.0时阅读the release notes和4.0 release announcement。
使用版本3.5.2,我可以在搜索数据时重现下划线匹配(使用formatSelection和query.term)..任何想法如何使用v4.0.0(函数templateResult只传递'结果&#) 39;而不再查询'
这已在4.0中删除,因为结果已与查询分开,因此继续传递信息没有意义。当然,这并不意味着您无法获取查询并存储它。您需要做的就是存储查询,类似下面的内容可能会起作用
var query = {};
var $element = $('#my-happy-select');
function markMatch (text, term) {
// Find where the match is
var match = text.toUpperCase().indexOf(term.toUpperCase());
var $result = $('<span></span>');
// If there is no match, move on
if (match < 0) {
return $result.text(text);
}
// Put in whatever text is before the match
$result.text(text.substring(0, match));
// Mark the match
var $match = $('<span class="select2-rendered__match"></span>');
$match.text(text.substring(match, match + term.length));
// Append the matching text
$result.append($match);
// Put in whatever is after the match
$result.append(text.substring(match + term.length));
return $result;
}
$element.select2({
templateResult: function (item) {
// No need to template the searching text
if (item.loading) {
return item.text;
}
var term = query.term || '';
var $result = markMatch(item.text, term);
return $result;
},
language: {
searching: function (params) {
// Intercept the query as it is happening
query = params;
// Change this to be appropriate for your application
return 'Searching…';
}
}
});
使用版本3.x,您可以使用搜索值添加空闲条目不在列表中(使用createSearchChoice)。 V4.0没有这个选项,不知道如何再次制作它?
这仍然可以使用tags
选项(将其设置为true
)在4.0中完成。如果您想自定义代码,可以使用createTag
(类似于createSearchChoice
)。
var $element = $('#my-happy-select');
$element.select2({
createTag: function (query) {
return {
id: query.term,
text: query.term,
tag: true
}
},
tags: true
});
答案 1 :(得分:3)
使用select2 4.x
为匹配结果加下划线的简单方法$element.select2({
escapeMarkup: function (markup) { return markup; }
,
templateResult: function (result) {
return result.htmlmatch ? result.htmlmatch : result.text;
}
,
matcher:function(params, data) {
if ($.trim(params.term) === '') {
return data;
}
if (typeof data.text === 'undefined') {
return null;
}
var idx = data.text.toLowerCase().indexOf(params.term.toLowerCase());
if (idx > -1) {
var modifiedData = $.extend({
'htmlmatch': data.text.replace(new RegExp( "(" + params.term + ")","gi") ,"<u>$1</u>")
}, data, true);
return modifiedData;
}
return null;
}
})