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

Метод 1: использование события select2:selecting
Событие select2:selecting запускается непосредственно перед выполнением выбора. Мы можем захватить введенное значение в этом событии, добавить его в раскрывающийся список, а затем инициировать выбор. Вот пример:

$('#mySelect').on('select2:selecting', function (e) {
  var typedValue = e.params.args.data.text;
  $(this).append('<option value="' + typedValue + '">' + typedValue + '</option>');
});

Метод 2: расширение select2.defaults
Другой подход заключается в расширении объекта select2.defaults с помощью специальной функции сопоставления. Эта функция проверит, существует ли введенное значение в раскрывающемся списке, и если нет, добавит его. Вот пример:

$.fn.select2.defaults.set('matcher', function(params, data) {
  var term = $.trim(params.term);
  if (term === '') {
    return data;
  }
  if ($(data.element).length === 0) {
    return {
      id: term,
      text: term
    };
  }
  return data;
});

Метод 3: изменение функции select2.ajax
Если вы используете функцию AJAX select2, вы можете изменить функцию select2.ajax, чтобы добавлять введенное значение к результатам. Вот пример:

$('#mySelect').select2({
  ajax: {
    url: '/search',
    dataType: 'json',
    processResults: function (data) {
      var term = $('#mySelect').val().trim();
      if (term !== '' && !data.find(obj => obj.text === term)) {
        data.push({ id: term, text: term });
      }
      return {
        results: data
      };
    }
  }
});

Добавление введенных значений в раскрывающиеся списки Select2 может значительно улучшить взаимодействие с пользователем и обеспечить большую гибкость при вводе в форму. В этой статье мы рассмотрели три метода достижения этой цели: использование события select2:selecting, расширение объекта select2.defaults и изменение функции select2.ajax. Выберите метод, который лучше всего соответствует требованиям вашего проекта, и начните расширять возможности своего Select2!