提问人:Derek Henderson 提问时间:6/20/2013 最后编辑:Derek Henderson 更新时间:7/30/2017 访问量:8911
是否可以将列表粘贴到 select2 字段并匹配列表中的每个项目?
Is it possible to paste a list to a select2 field and match each item in the list?
问:
我正在使用 Select2 来管理大型数据列表。用户表示希望能够将列表粘贴到 Select2 字段,以便一次选择各种项目,而不是手动输入和匹配列表中的每个项目。
我试图用它来分隔列表中的项目。这和文档中关于代币的演示使我相信我希望做的事情是可能的,但到目前为止,我还没有感到高兴。tokenSeparators
我用来实例化 Select2 的代码是:
$('input').select2({
width: 'element',
matcher: function (term, text) {
return text.toUpperCase().indexOf(term.toUpperCase()) === 0;
},
minimumInputLength: 3,
multiple: true,
data: tagList, // tagList is an array of objects with id & text parameters
placeholder: 'Manage List',
initSelection: function (element, callback) {
var data = [];
$.each(function () {
data.push({id: this, text: this});
});
callback(data);
},
tokenSeparators: [',', ', ', ' ']
});
澄清一下,在所有其他方面,select2 字段都有效。只是当列表粘贴到字段中时,没有任何匹配的内容。我想测试粘贴列表中的所有项目。这是否可行,如果可行,如何实现?
编辑:我尝试了以下代码,但似乎不起作用:
$('body').on('paste', '#s2id_list-unitids .select2-input', function () {
var that = this;
setTimeout(function () {
var tokens = that.value.split(/[\,\s]+/);
$('#list-unitids').val(tokens, true);console.log($('#list-unitids').select2('val'));
}, 1);
});
这是我创作的一把小提琴:http://jsfiddle.net/KCZDu/。
答:
20赞
igor.vaynberg
6/21/2013
#1
select2 提供了一个选项,可用于预处理输入。以下是您的特定用例的可能实现:tokenizer
tokenizer: function(input, selection, callback) {
// no comma no need to tokenize
if (input.indexOf(',')<0) return;
var parts=input.split(",");
for (var i=0;i<parts.length;i++) {
var part=parts[i];
part=part.trim();
// todo: check for dupes (if part is already in [selection])
// check if the part is valid
// todo: you will need a better way of doing this
var valid=false;
for (var j=0;j<unitIds.length;j++) {
if (part===unitIds[j]) { valid=true; break; }
}
if (valid) callback({id:part,text:part});
}
}
这是一个工作小提琴: http://jsfiddle.net/XcCqg/38/
另请注意,您的原始 Fiddle 使用 select2 3.2,它非常过时,可能不支持分词器。
评论
2赞
Derek Henderson
6/22/2013
谢谢!这个周末我可以放松了!:)
0赞
HasanG
6/8/2018
不知道是否是因为设置,但是当焦点进入输入时,我遇到了错误“TypeError: input.indexOf is not a function”。此外,它不能防止重复
1赞
Khaled AbuShqear
5/3/2016
#2
基本上,它覆盖了默认的粘贴函数来处理新的输入文本,此代码将根据选项“tokenSeparators”中指定的分隔符中断输入,然后将它们全部添加到分隔的列表中,您只需要在页面末尾运行此代码:
$(document).on('paste', 'span.select2', function (e) {
e.preventDefault();
var select = $(e.target).closest('.select2').prev();
var clipboard = (e.originalEvent || e).clipboardData.getData('text/plain');
var createOption = function (value, selected) {
selected = typeof selected !== 'undefined' ? selected : true;
return $("<option></option>")
.attr("value", value)
.attr("selected", selected)
.text(value)[0]
};
$.each(
clipboard.split(new RegExp(select.data('select2').options.options.tokenSeparators.map(function (a) {
return (a).replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}).join('|'))),
function (key, value) {
if (value && (!select.val() || (select.val() && select.val().indexOf('' + value) == -1))) {
select.append(createOption(value));
}
});
select.trigger('change');
});
评论
1赞
Sudar
7/28/2017
你能添加一个注释来解释它的作用吗?
0赞
Khaled AbuShqear
7/30/2017
@Sudar基本上它覆盖了 select2 字段的默认粘贴函数来处理新的输入文本,但此代码将根据选项“tokenSeparators”中指定的分隔符中断输入,然后将它们全部添加到分隔的选项列表中。希望你能理解我糟糕的英语:)
评论