Select2 - 选项项中的自定义输入字段，防止点击事件

Question

我正在向启用了"多个"的 Select2 字段中的每个选项项添加一个文本输入，我需要在单击输入时阻止所有 Select2 事件，无论是在下拉状态还是在任何条件下已经选择的药丸结果中。

我从另一个类似的问题开始，并试图通过尝试所有 Select2 事件将其扩展到我的需求，但我似乎无法在显示输入字段的每个地方阻止该事件。

$('#my-select').select2({
width: '300px',
multiple: true,
templateResult: function (item) {
var $result = $('<span>'+item.text+'</span><input class="input" placeholder="Input Text Here" onclick="test()">');
return $result;
},
templateSelection: function (item) {
var $result = $('<span>'+item.text+'</span><input class="input" placeholder="Input Text Here" onclick="test()">');
return $result;
}
}).on("select2:selecting", function (e) { 
console.log("selecting",e.params.args.originalEvent);
if (e.params.args.originalEvent.target.className === 'input') {
e.preventDefault();
}
}
);

http://jsfiddle.net/6spf32Lx/

此 JSFiddle 将阻止下拉选项中的 Select2 事件，但不会阻止已选择的选项(单击输入将清除该选项(。此外，它不会阻止药丸结果输入中的事件。

Answer 1

您的问题的解决方案是处理取消选择事件 选择2：取消选择可以防止的

https://select2.org/programmatic-control/events

var stopOpening = false;
$('#my-select').select2({
	width: '300px',
multiple: true,
templateResult: function (item) {
var $result = $('<span class="label">'+item.text+'</span><input class="input" placeholder="Input Text Here" onclick="test()">');
return $result;
},
templateSelection: function (item) {
var $result = $('<span  class="label">'+item.text+'</span><input class="input" placeholder="Input Text Here" onclick="test()">');
return $result;a
}
}).on({
"select2:unselecting": function(e) {
console.log("unselecting");
if (e.params.args.originalEvent.target.className === 'input') {
e.preventDefault();
}
},
"select2:opening": function(e) {
if(stopOpening == true){
stopOpening = false;
e.preventDefault();
}
}
});
test = function() {
console.log("click");
stopOpening = true;
}

.input {
float: right;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<select id="my-select">
<option>red</option>
<option>blue</option>
<option>green</option>
<option>yellow</option>
<option>white</option>
<option>black</option>
</select>