Select2 - настраиваемое поле ввода в элементах опций, предотвращение событий при нажатии - PullRequest
Новая
       18

Select2 - настраиваемое поле ввода в элементах опций, предотвращение событий при нажатии

1 голос
/ 06 октября 2019

Я добавляю текстовый ввод для каждого элемента опции в поле 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 в раскрывающемся списке, но не помешает этому для уже выбранной опции (где щелчок по входу очистит эту опцию). Также это не помешает событию во входных данных результата таблетки.

1 Ответ

1 голос
/ 06 октября 2019

Решением вашей проблемы была обработка события отмены выбора select2: отмена выбора , который можно предотвратить

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>
...