Select2 - 防止在更改时清除模板

Question

我有一个启用了多重设置的Select2 字段和一个包含输入字段的自定义 HTML 选择模板。

但是，似乎每当添加或删除新选项时，在自定义输入字段中输入的文本都会丢失 - 看起来 Select2 在更改事件上重新初始化/重置模板。

即使在选择/删除项目之后，是否有办法保留所有选项项目上输入的文本？

var stopOpening = false;

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

clickMe = function() {
  stopOpening = true;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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/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>

Answer 1

你要返回的结果必须是这样的

var $result = $('<span  class="label">' + item.text + '</span>');

不是这样的

$result = $('<span  class="label">' + item.text + '</span><input class="input" placeholder="Input Text Here" onclick="clickMe()">');