如何正确删除 Select2 下拉菜单

Question

我正在尝试使用 jQuery Select2 为标签输入。

通过向 Select2 添加 {tags: true} 选项，允许用户添加自定义标签，效果很好。但是我不想显示下拉列表，所以我添加了 CSS:

  .select2-dropdown--below {
    display: none;
  }

事实证明，当我输入新标签并按回车键时，它仍然有不需要的行为：

如果我输入一个新关键字，它插入成功
如果我输入的关键字是预 selected 选项之一的子字符串——例如“Strawberry”中已经包含的“raw”或“berry”——它不会插入

我认为这是由自动突出显示的 Select2 行为引起的/select 匹配输入字符串的选项

我该如何解决这个问题？或者有什么方法可以正确删除 Select2 下拉菜单？

这是完整的片段：

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
      <style>
      .select2-dropdown--below {
          display: none;
      }
      </style>
  </head>
  <body>
  <select multiple style="width: 100%">
      <option selected>Banana</option>
      <option selected>Orange</option>
      <option selected>Strawberry</option>
  </select>
  <script>
    $(document).ready(function () {
      $('select').select2({
        tags: true,
        width: 'resolve'
      });
    });
  </script>
  </body>
</html>

Answer 1

找到解决方案，我向始终 return null 的选项添加了一个匹配器，因此它不会匹配并突出显示任何预选选项

$('select').select2({
    tags: true,
    width: 'resolve',
    matcher: function () { return null; }
});

如何正确删除 Select2 下拉菜单

How to properly remove Select2 dropdown

jquery-select2