如何在 select2 数据行的一行中显示多个白色 space 字符？

Question

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

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

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

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

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

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;

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

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

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

Answer 2

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

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

缺点是：

None 将被转义，这可能会导致奇怪的结果 option 个元素，如果文本包含 HTML。
当您搜索 space 时，将不会匹配包含   的项目。

如果您只想允许多个 space 如此呈现，我认为 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;
}

如何在 select2 数据行的一行中显示多个白色 space 字符？

How can I show more than one white space character in a row in a select2 data row?

html

javascript

select2