是否可以在 Select2 中添加备用可搜索文本？

Question

是否可以在 select2 中搜索替代文本？，我的 select2 包含以下内容：

[
  {
    "id": 10,
    "text": "London"
  },
  {
    "id": 11,
    "text": "New York"
  },
  {
    "id": 12,
    "text": "Tokyo"
  }
]

我正在考虑如何添加另一个替代文本（在我的例子中，它是下面的alternate_text，所以我也可以搜索 CC-910，它会显示纽约）

[
  {
    "id": 10,
    "text": "London",
    "alternate_text": "CC-123"
  },
  {
    "id": 11,
    "text": "New York",
    "alternate_text": "CC-901",

  },
  {
    "id": 12,
    "text": "Tokyo",
    "alternate_text": "CC-678"
  }
]

任何人都可以告诉我如何实现这一目标吗？

非常感谢 多伊

Answer 1

实现此目的的一种方法是将要搜索的替代文本放置在隐藏范围中，并覆盖 escapeMarkup 选项以不转义 html 标记。

$(document).ready(function() {
const data = [
  {
    "id": 10,
    "text": "London <span style='display: none;'>CC-123</span>"
  },
  {
    "id": 11,
    "text": "New York<span style='display: none;'>CC-901</span>"
  },
  {
    "id": 12,
    "text": "Tokyo<span style='display: none;'>CC-678</span>"
  }
];

  $('#item_box').select2({data: data, escapeMarkup: (text) => text}); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<select id="item_box" style="width: 100%;"></select>