Backbone/Marionette 使用 select2 v4.0,编辑标签
Backbone/Marionette with select2 v4.0, editing the tags
我有 this fiddle,它是 Backbone/Marionette 游乐场 fiddle 的延伸。我包含了 select2 js 和 css 文件。
是否可以编辑不是最后一个标签的标签?您可以通过在框中退格进行编辑,但它只能让您触摸最后一个。我希望它像一个 gmail 'to' 列表一样工作,您可以在其中双击一个列表并对其进行编辑,然后它会返回到模糊标签。
this.$('#foo').select2({
data: [{
id: 1,
text: "test1.com"
}, {
id: 2,
text: "test2.com"
}],
multiple: true,
allowclear: true,
tags: [],
placeHolder: "Click Here!",
tokenSeparators: [',', ' '],
minimumResultsForSearch: 1
});
遗憾的是,仅使用开箱即用的 select2 功能无法做到这一点。但它的可扩展性很强,所以这里是诀窍:
var $select2 = this.$('#foo').select2({ tags: true });
var select2 = $select2.data("select2");
$(document.body).on("dblclick", ".select2-selection__choice", function(event) {
var $target = $(event.target);
// get the text and id of the clicked value
var targetData = $target.data("data");
var clickedValue = targetData.text;
var clickedValueId = targetData.id;
// remove that value from select2 selection
var newValue = $.grep(select2.val(), function (value) {
return value !== clickedValueId;
});
$select2.val(newValue).trigger("change");
// set the currently entered text to equal the clicked value
select2.$container.find(".select2-search__field").val(clickedValue).trigger("input").focus();
});
当然还有 JsFiddle。
我有 this fiddle,它是 Backbone/Marionette 游乐场 fiddle 的延伸。我包含了 select2 js 和 css 文件。
是否可以编辑不是最后一个标签的标签?您可以通过在框中退格进行编辑,但它只能让您触摸最后一个。我希望它像一个 gmail 'to' 列表一样工作,您可以在其中双击一个列表并对其进行编辑,然后它会返回到模糊标签。
this.$('#foo').select2({
data: [{
id: 1,
text: "test1.com"
}, {
id: 2,
text: "test2.com"
}],
multiple: true,
allowclear: true,
tags: [],
placeHolder: "Click Here!",
tokenSeparators: [',', ' '],
minimumResultsForSearch: 1
});
遗憾的是,仅使用开箱即用的 select2 功能无法做到这一点。但它的可扩展性很强,所以这里是诀窍:
var $select2 = this.$('#foo').select2({ tags: true });
var select2 = $select2.data("select2");
$(document.body).on("dblclick", ".select2-selection__choice", function(event) {
var $target = $(event.target);
// get the text and id of the clicked value
var targetData = $target.data("data");
var clickedValue = targetData.text;
var clickedValueId = targetData.id;
// remove that value from select2 selection
var newValue = $.grep(select2.val(), function (value) {
return value !== clickedValueId;
});
$select2.val(newValue).trigger("change");
// set the currently entered text to equal the clicked value
select2.$container.find(".select2-search__field").val(clickedValue).trigger("input").focus();
});
当然还有 JsFiddle。