单击标签时防止 select2 打开

Question

这个问题演变成阻止下拉菜单在输入键按下时打开。如您所见，当您在标签输入具有焦点时按 Enter 键时，我的丑陋解决方案会使用 setTimeout 关闭下拉列表。如何防止它在进入时完全打开，而不是在打开后关闭它？

以下是一些可能有用的事件： https://select2.org/programmatic-control/events

var tagClick = false;
$(document).on('mousedown touchstart', '.tag', function(e) {
  var $self = $(this);
  tagClick = true;
});
$(document).on('click', '.tag', function(e) {
  var $self = $(this);
  var $input = $self.find('input');
  $input.select();
});
$(document).on('blur', '.tag input', function(e) {
  var $self = $(this);
  $self.attr('value', $self.val());
  setTimeout(function() {
    $(".tags").select2('close');
  }, 100);
  // Save to db here
});
$(document).on('keydown', '.tag input', function(e) {
	var nl = e.keyCode == 13; // is enter?
	var $self = $(this);
	if( nl )
	{
		$self.blur();
	}
});

$(".tags").select2({
    templateSelection: function(argSelection)
    {
      return $.parseHTML('<span class="tag">'+(argSelection.name || argSelection.text)+'<input type="text" value="" /></span>');
    },
  tags: true,
  width: '100%'
})
.on('select2:opening', function (e) {
  var $self = $(this);
  if( tagClick )
  {
    e.preventDefault();
    tagClick = false;
  }
})

.tag input {
  width: 50px;
  height: 10px;
  margin-left: 5px;
}
.tag input[value=""]:not(:focus) {
  width: 0;
  margin-left: 0;
  background: transparent;
  border: none;
}

<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.7/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

<select class="tags" multiple="multiple">
  <option selected="selected">orange</option>
  <option>white</option>
  <option selected="selected">purple</option>
</select>

Answer 1

在阅读了一些关于event listeners 的文档后，我编写了这段代码，该代码仅在您单击十字删除标签时才有效，请指定如果您希望在整个标签被点击时阻止下拉菜单，我会查看上面是代码，基本上，我们听到select2:unselecting 事件并通过阻止其正确的打开事件触发来阻止下拉菜单显示：

$(".tags").on('select2:unselecting', function (e) { 
  $(".tags").on('select2:opening', function (ev) {
    ev.preventDefault();
    $(".tags").off('select2:opening');
  });
});

下面的工作sn-p：

$(".tags").select2({
  tags: true,
  width: '100%'
});

$(".tags").on('select2:unselecting', function (e) { 
  $(".tags").on('select2:opening', function (ev) {
    ev.preventDefault();
    $(".tags").off('select2:opening');
  });
});

<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.7/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

<select class="tags" multiple="multiple">
  <option selected="selected">orange</option>
  <option>white</option>
  <option selected="selected">purple</option>
</select>