是否可以将列表粘贴到select2字段并匹配列表中的每个项？
是否可以将列表粘贴到select2字段并匹配列表中的每个项？
提问于 2013-06-19 17:06:37
我正在使用Select2来管理大的数据列表。用户表示希望能够将列表粘贴到Select2字段，以便立即选择各种项，而不是手动输入和匹配列表中的每个项。
我尝试使用tokenSeparators来分离列表中的项目。这和demo on tokens in the documentation让我相信我希望做的事情是可能的，但是到目前为止我还没有joy。
用于实例化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/。
Stack Overflow用户
发布于 2016-05-03 14:26:53
基本上，它重写默认的粘贴函数来处理新的输入文本，这段代码将根据选项“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');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17197223
复制相关文章
相似问题
腾讯云开发者
