Select2 - Запретить очистку шаблона при изменении - PullRequest
Новая
       12

Select2 - Запретить очистку шаблона при изменении

0 голосов
/ 11 октября 2019

У меня есть поле 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>

1 Ответ

0 голосов
/ 11 октября 2019

Ваш возвращаемый результат должен быть таким 

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

не таким 

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