Выберите 2 отменить при вводе нажмите - PullRequest
Новая
       11

Выберите 2 отменить при вводе нажмите

1 голос
/ 09 апреля 2020

Я реализовал плагин select2 с некоторыми настройками для скрытия выбранных тегов (я строю их в отдельном поле), пользовательский поиск (слова между ( и ) не должны находиться в области поиска) и Избегайте закрытия раскрывающегося списка, когда элемент выбран или не выбран.

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

Я попытался прослушать все события, запущенные select2, но не могу отменить выбор и предотвратить закрытие выпадающего меню, когда пользователь выбирает элемент нажатием кнопки ввода на уже выбранном элементе. Но с мышью все работает нормально! 

var availableData = [{
    "id": 38,
    "text": "Test [38] (coding)"
  },
  {
    "id": 62,
    "text": "banana [62] (fruit)"
  },
  {
    "id": 63,
    "text": "apple [63] (fruit)"
  },
  {
    "id": 65,
    "text": "dog [65] (animal)"
  },
];

// Init select 2
$('.js-example-basic-multiple').select2({
  // Set multiple element select
  multiple: true,
  // Set a placeholder
  placeholder: 'Select',
  // It's better to set a static width, otherwise use bootstrap grids
  // on container parent and set 100% width
  width: '300px',
  // Init plugin with data
  data: availableData,
  closeOnSelect: false,
  templateSelection: function(ev, elem) {
    // Hide selected elements
    elem.hide();
  },
  matcher: function(params, data) {
    // If there are no search terms, return all of the data
    if ($.trim(params.term) === '') return data;

    // Do not display the item if there is no 'text' property
    if (typeof data.text === 'undefined') return null;

    // Regex that exclude all what is inside ()
    const regex = /^(.+)\s\[([0-9]+)\]\s\((.+)\)$/gm;
    // Apply regex
    var matches = data.text.matchAll(regex).next();

    // If no matches, return null
    if (!matches) return null;

    // If no groups was found, return null
    if (!matches.value || matches.value.length === 0) return null;

    // If on the first group was match, return it! (name)
    if (matches.value[1].toLowerCase().indexOf(
        params.term.toLowerCase()
      ) > -1) return data;

    // If on the second group was match, return it! (id)
    if (matches.value[2].toLowerCase().indexOf(
        params.term.toLowerCase()
      ) > -1) return data;

    // Return `null` if the term should not be displayed
    return null;
  }
});

$('.js-example-basic-multiple').on('select2:select', function(e) {
  console.log("=> It's me, select2:select");
});
$('.js-example-basic-multiple').on('select2:closing', function(e) {
  console.log("=> It's me, select2:closing", e);
});
$('.js-example-basic-multiple').on('select2:close', function(e) {
  console.log("=> It's me, select2:close", e);
});
$('.js-example-basic-multiple').on('select2:opening', function(e) {
  console.log("=> It's me, select2:opening");
});
$('.js-example-basic-multiple').on('select2:open', function(e) {
  console.log("=> It's me, select2:open");
});
$('.js-example-basic-multiple').on('select2:selecting', function(e) {
  console.log("=> It's me, select2:selecting");
});
$('.js-example-basic-multiple').on('select2:unselecting', function(e) {
  console.log("=> It's me, select2:unselecting");
});
$('.js-example-basic-multiple').on('select2:unselect', function(e) {
  console.log("=> It's me, select2:unselect");
});
$('.js-example-basic-multiple').on('select2:clearing', function(e) {
  console.log("=> It's me, select2:clearing");
});
$('.js-example-basic-multiple').on('select2:clear', function(e) {
  console.log("=> It's me, select2:clear");
});


// Select2 event: triggered whenever an option is selected or removed.
$('.js-example-basic-multiple').on('change', function(e) {
  // If almost 1 id was selected, join with ',', otherwise blank string
  var ids = $(this).val() ? $(this).val().join(',') : "";
  console.log("TODO: Create elements with ids: ", ids);
  // Append to the paragraph
  $(".the-paragraph").empty().append("Your ids: " + ids);
});
<p>This is my HTML5 Boilerplate.</p>
<p>
  <div>
    <select class="js-example-basic-multiple"></select>
  </div>
  <p class="the-paragraph"></p>
</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
...