Select2 -搜索通配符匹配

Select2 - Searching wildcard matches

本文关键字：通配符 搜索 Select2      更新时间：2023-09-26

我正在使用Select2样式我的选择框和添加功能，我想知道我如何能使搜索规则更宽松。目前，如果下拉菜单中有"New Mexico"，我可以搜索"Mexico"或"New Mexico"来匹配选择选项，但如果我输入"Mexico New"，我得到的是"没有找到结果"。有没有一种方法可以扩展搜索功能来匹配搜索词，而不管它们的顺序?

$(document).ready(function() {
  $(".states").select2();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<select class="states" style="width: 50%">
  <option value="NH">New Hampshire</option>
  <option value="NJ">New Jersey</option>
  <option value="NM">New Mexico</option>
  <option value="TB">Tshirt, Black</option>
</select>

好的，显然你可以设置自定义匹配器来完成这个。我找到了这个，它似乎是按预期工作:

$(function () { 
    $('.states').select2({
        matcher: function (params, data) {
            if ($.trim(params.term) === '') {
                return data;
            }
            keywords=(params.term).split(" ");
            for (var i = 0; i < keywords.length; i++) {
                if (((data.text).toUpperCase()).indexOf((keywords[i]).toUpperCase()) == -1) 
                return null;
            }
            return data;
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<select class="states" style="width: 50%">
  <option value="NH">New Hampshire</option>
  <option value="NJ">New Jersey</option>
  <option value="NM">New Mexico</option>
  <option value="TB">Tshirt, Black</option>
</select>

相关文章：