Предотвращение открытия select2 при нажатии на тег - PullRequest
Новая
       19

Предотвращение открытия select2 при нажатии на тег

1 голос
/ 18 мая 2019

Этот вопрос превратился в предотвращение открытия раскрывающегося списка при нажатии клавиши ввода.Как вы можете видеть, мое уродливое решение закрывает раскрывающийся список с 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>

1 Ответ

0 голосов
/ 18 мая 2019

Прочитав некоторую документацию о прослушивателях событий , я написал этот код, который работает только при нажатии на крестик для удаления тега. Укажите, хотите ли вы предотвратить выпадающий список, если весь тег получаетщелкнул, и я посмотрю на него, вот код, в основном, мы слышим о событии select2:unselecting и предотвращаем показ раскрывающегося меню, предотвращая запуск соответствующего события открытия: 

$(".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>
...