Select2 4.0.0 AJAX - выберите выделенный параметр с помощью Tab

Я обнаружил, что принятый ответ Sniffdk больше не работает с последними библиотеками jquery и select2. Это дает мне Uncaught TypeError: Cannot read property 'id' of undefined.

Я придумал следующее решение, которое работает (для выпадающих списков select2 с одним выбором):

function pickSelect2OptionOnTab() {
    let $select;
    let optionSelected;
    let select2Closing = false;

    $('select').on('select2:closing', function(event) {
        select2Closing = true;
        $select = $(event.target);
        optionSelected = $('.select2-results__option--highlighted').text();
        setTimeout(function() {
            select2Closing = false;
        }, 1);
    });

    $(document).bind('keydown', function(event) {
        if (event.key === 'Tab' && select2Closing) {
            const val = $select.find('option').filter(function() {
                return $(this).text() === optionSelected;
            }).first().prop('value');
            $select.val(val);
            $select.trigger('change');
        }
    });
}

Я пытался найти решение и этой проблемы.
Основная проблема заключается в том, что события select2 не дают никакого представления о том, какая клавиша была нажата.

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

selectElement
.select2({ options ... })
.on('select2:close', function(evt) {
    var context = $(evt.target);

    $(document).on('keydown.select2', function(e) {
        if (e.which === 9) { // tab
            var highlighted = context
                              .data('select2')
                              .$dropdown
                              .find('.select2-results__option--highlighted');
            if (highlighted) {
                var id = highlighted.data('data').id;
                context.val(id).trigger('change');
            }
        }
    });

    // unbind the event again to avoid binding multiple times
    setTimeout(function() {
        $(document).off('keydown.select2');
    }, 1);
});

Функция selectOnClose кажется стабильной в 4.0.3 и имеет гораздо более простое решение:

$("#user-select").select2({
  ...
  selectOnClose: true
});

Возможно, этой функции мешает использование шаблонов, я их не использую, поэтому не проверял.

Для тех, кто хочет, чтобы выбор вкладок работал с множественным выбором, это сработало для меня:

$("#selected_ids").select2({ multiple: true }).on('select2:open', function(e) { selectOnTab(e) });

function selectOnTab(event){

  var $selected_id_field = $(event.target);

  $(".select2-search__field").on('keydown', function (e) {
    if (e.which === 9) {
      var highlighted = $('.select2-results__option--highlighted');

      if (highlighted) {
        var data = highlighted.data('data');
        var vals = $selected_id_field.val();
        if (vals === null){
          vals = [];
        }
        vals.push(data.id)
        $selected_id_field.val(vals).trigger("change")
      }
    }
  });
}

В настоящее время это ограничивает меня одним полем на странице, но оно выполняет свою работу.

Спасибо, MikeOShay и Sniffdk, за то, что покопались в этом.
В настоящее время существует открытая проблема, которая может решить эту проблему для нас:

https://github.com/select2/select2/issues/3359

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

var fixSelect2MissingTab = function (event) {
    var $selected_id_field = $(event.target);

    var selectHighlighted = function (e) {
        if (e.which === 9) {
            var highlighted = $selected_id_field.data('select2').$dropdown.find('.select2-results__option--highlighted');

            if (highlighted) {
                var data = highlighted.data('data');
                if (data) {
                    var vals = $selected_id_field.val();
                    if (vals === null) {
                        vals = [];
                    }
                    if (vals.constructor === Array) {
                        vals.push(data.id);
                    } else {
                        vals = data.id;
                    }
                    $selected_id_field.val(vals).trigger("change");
                }
            }
        }
    };

    $('.select2-search__field').on('keydown', selectHighlighted);       
}

$(document).on('select2:open', 'select', function (e) { fixSelect2MissingTab(e) });
$(document).on('select2:close', 'select', function (e) {
    //unbind to prevent multiple
    setTimeout(function () {
        $('.select2-search__field').off('keydown');
    }, 10);
});

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

Я использую версию select2 4.0.6-rc.1 с vue, вот что я сделал, чтобы сохранить привязку в безопасности:

selectElement
.select2({ options ... })
.on("select2:close", function(evt) {
      var context = $(evt.target);

      $(document).on("keydown.select2", function(e) {
          if (e.which === 9) {
              var highlighted = context
                  .data("select2")
                  .$dropdown.find(".select2-results__option--highlighted");

              if (highlighted) {
                  $.fn.select2.amd.require(["select2/utils"], function(Utils) {
                      var data = Utils.__cache[highlighted.data().select2Id].data;
                      var $select2 = context.data('select2');
                      $select2.trigger("select", {data: data});
                  });
              }
          }
      });

      setTimeout(function() {
        $(document).off("keydown.select2");
      }, 1);
  });

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

Удачи! :)

Вы можете просто изменить источник управления Select2, только одну строку:

иначе если (ключ === KEYS.ENTER)

иначе если (ключ === KEYS.ENTER || ключ === KEYS.TAB)

Из этого:

 this.on('keypress', function (evt) {
   var key = evt.which;

   if (self.isOpen()) {
     if (key === KEYS.ESC || key === KEYS.TAB ||
         (key === KEYS.UP && evt.altKey)) {
       self.close();

       evt.preventDefault();
     } else if (key === KEYS.ENTER) {
       self.trigger('results:select', {});

       evt.preventDefault();

К этому

this.on('keypress', function (evt) {
  var key = evt.which;

  if (self.isOpen()) {
    if (key === KEYS.ESC || (key === KEYS.UP && evt.altKey)) {
      self.close();

      evt.preventDefault();
    } else if (key === KEYS.ENTER || key === KEYS.TAB) {
      self.trigger('results:select', {});

      evt.preventDefault();

Изменение можно внести в исходный файл src/js/select2/core.js или в скомпилированную версию. Когда я применял это изменение, я модифицировал src/js/select2/core.js и выполнил gruntfile.js, чтобы снова скомпилировать библиотеку select2. Это решение не является обходным путем, но является хорошей функцией для select2.

Подобно решению @Semen Shekhovtsov, но с изюминкой, если вы хотите, чтобы TAB фактически перешел к следующему полю, а также сделал выбор (больше похоже на обычный выбор ввода). Разделите KEYS.ENTER и KEYS.TAB на их собственные блоки else if и оставьте evt.preventDefaults(). Как показано ниже в core.js или в select2.full.js (если вы не хотите его перекомпилировать).

if (key === KEYS.ESC || (key === KEYS.UP && evt.altKey)) {
  self.close();

  evt.preventDefault();
} else if (key === KEYS.ENTER){
  self.trigger('results:select', {});
  evt.preventDefault();
} else if (key === KEYS.TAB){
  self.trigger('results:select', {});
  // leave out the prevent default if you want it to go to the next form field after selection
  //evt.preventDefault();
}

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

Я также хотел, чтобы клавиша TAB делала выбор и сразу фокусировалась на следующем поле select2. SHIFT-TAB вместо этого сфокусирует предыдущее поле select2.

Вот мой окончательный код (select2 4.0.5, проверено на FF и Chrome). Я предполагаю, что ваши поля выбора имеют класс "select2":

$('.select2').select2().on('select2:close', function (e) {
    var target = $(e.target);

    $(document).on('keydown.select2', function(e) {
        if (e.which === 9) { // tab
            var highlighted = target
                              .data('select2')
                              .$dropdown
                              .find('.select2-results__option--highlighted');
            if (highlighted) {
                // select the option
                var id = highlighted.data('data').id;
                target.val(id);
                target.trigger('change');
                // focus the next (or the previous) field with "select2" class
                var set = $('.select2');
                var current_index = set.index(target);
                var next_index = current_index + 1;
                if (e.shiftKey) {
                    next_index = current_index - 1;
                }
                var next = set.eq(next_index)
                next.focus();
            }
        }
    });

    // unbind the event again to avoid binding multiple times
    setTimeout(function() {
        $(document).off('keydown.select2');
    }, 1);

});

// on focus, open the menu
$(document).on('focus', '.select2-selection.select2-selection--single', function (e) {
    $(this).closest(".select2-container").siblings('select:enabled').select2('open');
});