防止单击标签时打开select2 [英] Prevent select2 from opening when a tag is clicked

问题描述

此问题演变为阻止在Enter键上打开下拉列表的问题.如您所见，当标签输入具有焦点时，按Enter键时，我的丑陋解决方案会以setTimeout结束下拉列表.如何防止它在输入时完全打开，而不是在打开后将其关闭?

This question evolved into preventing the dropdown from opening on enter key press. As you can see, my ugly solution closes the dropdown with a setTimeout when you press enter when a tag input has focus. How can I prevent it from opening at all on enter, instead of closing it after it has opened?

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

Here are some events that may be useful: 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>

推荐答案

在阅读了有关事件侦听器，我编写了此代码，仅当您在十字架上单击以删除标签时，此代码才有效，请指定是否希望在单击整个标签时阻止下拉菜单，我将继续关注它是下面的代码，基本上，我们正在听select2:unselecting事件，并通过阻止其适当的打开事件来触发来阻止下拉菜单显示:

After reading some documentation about the event listeners, I wrote this code that works only when you click on the cross to remove a tag, please specify if you wish to prevent the dropdown if the whole tag gets clicked and I will look on it, here is the code, basically, we're hearing for select2:unselecting event and preventing the drop-down menu to show by preventing its proper opening event to trigger :

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

下面的工作片段:

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

$(".tags").on('select2:unselecting', function (e) {	
  $(".tags").on('select2:opening', function (e) {
    e.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>

这篇关于防止单击标签时打开select2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！