如何在 select2 数据行中的一行中显示多个空格字符？

Question

我使用Select2 并使用{data: [{id:1, text: "..."}] 方法来定义选项。我想通过对由多个空格字符组成的子字符串进行分组来格式化每个选项。所以是这样的：

{data: [
    {id:1, text: "Trees     -     Oak"},
    {id:2, text: "Trees     -     Pine"},
    {id:3, text: "Seas      -     North Sea"},
    {id:4, text: "Seas      -     Baltic Sea"}
]}

当我这样做时，它们在结果下拉列表中显示为一个空格（处理空格的默认 HTML 方式）。当我使用   而不是空格时，它们在下拉菜单中显示为字符串“ ”而不是空格。

{data: [
    {id:1, text: "Trees   -   Oak"},
    {id:2, text: "Trees   -   Pine"},
    {id:3, text: "Seas   -   North Sea"},
    {id:4, text: "Seas   -   Baltic Sea"}
]}

有没有办法保留我在数据项的text 属性中定义的所有空格？

Answer 1

您不想改用optgroups 吗？

{data: [
  {
    text: "Trees",
    children: [
      {id:1, text: "Oak"},
      {id:2, text: "Pine"},
    ]
  },
  {
    text: "Seas",
    children: [
      {id:1, text: "North Sea"},
      {id:2, text: "Baltic Sea"},
    ]
  },
]}

或尝试添加

white-space: pre;

在选择项的css-class中保留字符串中的所有空格。

正如 koenpeters 在 cmets 中所说，默认主题 css 将如下所示：

.select2-container--default .select2-results__option {
  white-space: pre;
}

Answer 2

Yuri Gor 给出的答案的替代方法是使用   并将 escapeMarkup 包含到 select2 创建中。

$("#isOfTheSelectNode").select2({
    escapeMarkup: function (m) { return m; }
});

缺点是：

• 没有任何 html 标记将被转义，这可能会导致奇怪 option 元素，如果文本包含 HTML。
• 搜索空格时将不匹配包含  的项目。

如果您只想允许多个空间被渲染，我认为 Yuri Gor 的答案会更好。

Answer 3

将white-space: normal; 添加到您的风格中

.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: inline;
    list-style: none;
    padding: 0;
    white-space: normal;
}