select2开启自定义输入时搜索历史显示、回车输入无效问题求助

问题1：搜索历史自动留存为选项的修复 #

该问题是开启tags模式后，select2默认会缓存用户输入的搜索内容，同时浏览器自动填充也可能把历史输入带入选项列表，修复方案如下：

1. 给select元素添加autocomplete="off"属性，禁用浏览器历史填充：

<select class="form-control" type="text" id="title" name="title" autocomplete="off">
       <option value=""></option>
       @foreach($titles as $title)
       <option value="{{ $title }}">{{ $title }}</option>
       @endforeach
 </select>

2. 初始化select2时添加关闭下拉清空搜索框的逻辑，同时禁用缓存：

$("#title").select2({
  tags: true,
  cache: false
}).on('select2:close', function () {
  // 清空搜索输入框内容，避免历史留存
  $('.select2-search__field').val('');
});

问题2：回车后自定义值不选中、搜索框清空的修复 #

该问题是select2默认的标签创建逻辑没有对回车事件做强制校验，未匹配到预置选项时会直接清空输入内容，修复方案如下：
在初始化配置中添加selectOnClose、自定义标签创建规则，同时绑定回车事件手动处理选中逻辑，完整配置代码如下：

$("#title").select2({
  tags: true,
  cache: false,
  selectOnClose: true, // 关闭下拉时自动选中当前输入内容
  // 自定义标签生成规则，过滤空输入
  createTag: function (params) {
    const term = $.trim(params.term);
    if (term === '') return null;
    return {
      id: term,
      text: term,
      newTag: true
    }
  },
  // 新生成标签放在选项列表首位
  insertTag: function (data, tag) {
    data.unshift(tag);
    return data;
  }
}).on('select2:close', function () {
  $('.select2-search__field').val('');
// 绑定回车事件，强制选中自定义输入内容
}).on('select2:open', function () {
  $('.select2-search__field').off('keydown').on('keydown', function (e) {
    if (e.key === 'Enter' && $.trim($(this).val()) !== '') {
      e.preventDefault();
      e.stopPropagation();
      const inputVal = $.trim($(this).val());
      // 校验选项是否已存在
      const existOption = $("#title option").filter(function() {
        return $(this).text().trim() === inputVal;
      }).length > 0;
      if (!existOption) {
        // 新增自定义选项并选中
        $("#title").append(new Option(inputVal, inputVal, true, true));
      } else {
        // 直接选中已有选项
        $("#title").val(inputVal);
      }
      $("#title").trigger('change');
      $("#title").select2('close');
    }
  });
});

内容的提问来源于stack exchange，提问作者Hoda Kh