Javascript 在选项项中选择2-自定义输入字段，在单击时阻止事件

我正在为Select2字段中启用“multiple”（多个）的每个选项项添加文本输入，并且我需要在单击输入时阻止所有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();
    }
  }
);

$（“#我的选择”）。选择2({
宽度：“300px”，
多重：对，
templateResult:函数（项）{
var$result=$（“”+item.text+“”）；
返回$result；
},
模板选择：功能（项）{
var$result=$（“”+item.text+“”）；
返回$result；
}
}).on（“select2:selection”，函数（e）{
日志（“选择”，e.params.args.originalEvent）；
if（e.params.args.originalEvent.target.className==='input'）{
e、 预防默认值（）；
}
}
);

---

此JSFIDLE将阻止下拉选项中的Select2事件，但不会阻止已选定选项中的Select2事件（单击输入将清除该选项）。此外，它不会阻止pill结果输入中的事件。

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

var stopopending=false；
$（“#我的选择”）。选择2({
宽度：“300px”，
多重：对，
templateResult:函数（项）{
var$result=$（“”+item.text+“”）；
返回$result；
},
模板选择：功能（项）{
var$result=$（“”+item.text+“”）；
返回$result；a
}
}).在({
“选择2：取消选择”：功能（e）{
console.log（“未选择”）；
if（e.params.args.originalEvent.target.className==='input'）{
e、 预防默认值（）；
}
},
“选择2：打开”：功能（e）{
如果（停止打开==真）{
停止打开=错误；
e、 预防默认值（）；
}
}
});
测试=函数（）{
控制台日志（“单击”）；
停止打开=真；
}

.input{
浮动：对；
}

红色
蓝色
绿色
黄色的
白色
黑色

添加的查询解决方案添加新项目或删除现有项目时，是否可以保留输入字段中输入的文本？每次更改选项项时，选择2似乎都会清除/重新初始化选项项。