时间戳

首页 > 解决方案 > 如何正确删除 Select2 下拉菜单

jquery-select2 - 如何正确删除 Select2 下拉菜单

问题描述

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

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

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

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

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

我怎样才能解决这个问题？或者有什么方法可以正确删除 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>

标签： jquery-select2

解决方案

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

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

推荐阅读