我有一个应用了 Select2 标签的输入(文本区域)。因此,当用户输入我的数据库中存在的项目的名称时,它会显示匹配项目的列表,用户可以选择一个并创建一个标签。
到目前为止,这是我的基本标记功能代码:
$('#usualSuppliers').select2({
placeholder: "Usual suppliers...",
minimumInputLength: 1,
multiple: true,
id: function(e) {
return e.id + ":" + e.name;
},
ajax: {
url: ROOT + 'Ajax',
dataType: 'json',
type: 'POST',
data: function(term, page) {
return {
call: 'Record->supplierHelper',
q: term,
page_limit: 10
};
},
results: function(data, page) {
return {
results: data.suppliers
};
}
},
formatResult: formatResult,
formatSelection: formatSelection,
initSelection: function(element, callback) {
var data = [];
$(element.val().split(",")).each(function(i) {
var item = this.split(':');
data.push({
id: item[0],
title: item[1]
});
});
//$(element).val('');
callback(data);
}
});
如果键入的文本不存在,是否可以创建新标签?最初我认为这可以通过用空格分隔来完成,但是有些项目( vendor 名称)中会有空格,所以这是行不通的。
我认为当没有找到匹配项时,用户需要通过按下可能出现在下拉框中的按钮以某种方式“创建”标签,但我不知道该怎么做。
我如何允许用户创建可能包含空格的新标签,并且仍然能够继续添加更多现有或其他标签?
最佳答案
是的,你可以做到。文档中有一个示例。看http://ivaynberg.github.io/select2/#events
$("#e11_2").select2({
createSearchChoice: function(term, data) {
if ($(data).filter( function() { return this.text.localeCompare(term)===0;
}).length===0) {
return {id:term, text:term};
}
},
multiple: true,
data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});
您必须创建一个类似于 createSearchChoice 的函数,它返回一个带有“id”和“text”的对象。在其他情况下,如果您返回 undefined,则不会创建该选项。
关于javascript - 在 Select2 标签文本区域中创建新标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19903353/