选择2搜索与标签相关的关键字

Question

我目前正在开发一个使用 select2 加载货币的货币转换应用程序。

我希望用户能够通过键入国家/地区来查找货币。例如：

• 如果搜索美国-> 美元应该出现
  
• 如果搜索西班牙，意大利->欧元应该会出现

我一直在浏览 Select2 文档，但找不到如何将相关关键字添加到我的货币标签中。

请参阅下面的代码：

<select id="to" class="js-example-templating" onchange="convertCurrencyRight()" onkeyup="convertCurrencyRight()" >
<option value="USD" selected>USD </option>
<option value="EUR"  >EUR </option>
</select>

问题的图像

知道如何解决这个问题吗？

谢谢

Answer 1

使用自定义matcher和data()函数

$(".select").select2({
matcher: matchCustom
});
function matchCustom(params, data) {
// If there are no search terms, return all of the data
if ($.trim(params.term) === '') {
return data;
}
// Do not display the item if there is no 'text' property
if (typeof data.text === 'undefined') {
return null;
}
// `params.term` should be the term that is used for searching
// `data.text` is the text that is displayed for the data object
if (data.text.toUpperCase().indexOf(params.term.toUpperCase()) > -1) {
return data;
}
// custom search using lookup data
if ($(data.element).data('lookup').toUpperCase().indexOf(params.term.toUpperCase()) > -1) {
return data;
}
// Return `null` if the term should not be displayed
return null;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<select class="select" style="width: 200px">
<option value="USD" data-lookup="America" selected>USD </option>
<option value="EUR" data-lookup="Spain, Italy">EUR </option>
</select>