时间戳

首页 > 解决方案 > 多种语言的 Select2 过滤器

javascript - 多种语言的 Select2 过滤器

问题描述

我正在初始化一个 select2 输入。我想过滤希腊语和英语的结果。但是我想隐藏英文单词。关键是当用户输入英语或希腊语（使用搜索）时能够返回相同的结果。这可能吗？

<select class="custom-select custom-select-sm" id="streets">
  {% for s in streets  %}
       <option>{{s.street_desc_greek}} {{s.street_desc_english}}</option>
  {% endfor %}
</select>


$(()=>{
    $("#streets").select2({
        id : 'streets',
        width: '100%',

    })
})

标签： javascriptjqueryjquery-select2

解决方案

您可以使用data-english将您的英文单词放在选项中，然后使用matcherselect2 来自定义结果的匹配方式。例子：

$("#streets").select2({
    id : 'streets',
    matcher: matchCustom
})

function matchCustom(params, data) {
   if ($.trim(params.term) === '') return data;
   if (data.text.indexOf(params.term) > -1 || data.element.dataset.english.indexOf(params.term) > -1) return data;
   return null;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

<select id="streets">
  <option value="1" data-english="English1">Greek1</option>
  <option value="2" data-english="English2">Greek2</option>
  <option value="3" data-english="English3">Greek3</option>
  <option value="4" data-english="English4">Greek4</option>
</select>

推荐阅读