带有select2 v4.0的主干/牵线木偶,编辑标签 [英] Backbone/Marionette with select2 v4.0, editing the tags
问题描述
我有这个小提琴,它是Backbone/Marionette游乐场小提琴的扩展.我包括了select2 js和CSS文件.
I have this fiddle which is an extension of the Backbone/Marionette playground fiddle. I included select2 js and css files.
是否可以编辑不是最后一个标签的标签?您可以通过在框中退格来进行编辑,但只能让您触摸最后一个.我希望它的作用类似于gmail到"列表,您可以双击它并对其进行编辑,然后将其返回到模糊的标签.
Is it possible to edit a tag that is not the last tag? You can edit by backspacing in the box, but it only lets you touch the last one. I would like it to act like a gmail 'to' list where you can double click on one and edit it, then it goes back to a tag on blur.
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的即用型功能无法做到这一点.但这是相当可扩展的,所以这就是窍门:
Unfortunately, there is no way to do this using just the select2 out-of-the-box functionality. But it's quite extendable, so here's what does the trick:
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 .
这篇关于带有select2 v4.0的主干/牵线木偶,编辑标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!