Select2 自定义搜索
Posted
技术标签:
【中文标题】Select2 自定义搜索【英文标题】：Select2 custom search 【发布时间】：2020-05-22 09:31:26 【问题描述】：我有一个我们格式的选择框电话号码，我需要使用选择 2 搜索有或没有格式化的值。
例如。
选择框值包括
(111) 222-3333
(222) 333-4444
(444) 555-6666
现在我的选择 2 搜索仅在我以正确格式 (111) 222-3333 搜索数字时才有效，即使我搜索 1112223333 也需要得到结果。
<select class="js-example-basic-single" id="list" name="inventory" placeholder="Select">
<option value="1">(111) 222-3333</option>
<option value="2">(222) 333-4444</option>
<option value="3">(444) 555-6666</option>
</select>
<script>
$('.js-example-basic-single').select2();
</script>
谢谢
【问题讨论】：
【参考方案1】：您可以使用下面的搜索功能来达到预期的结果：
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<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.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<select class="js-example-basic-single" id="list" name="inventory" placeholder="Select">
<option value="1">(111) 222-3333</option>
<option value="2">(222) 333-4444</option>
<option value="3">(444) 555-6666</option>
</select>
<script>
function ignoreSpecialCharAndWhitespace(params, data)
params.term = params.term || '';
term = params.term.toUpperCase().replace(/ /g, String.fromCharCode(160));
term = term.replace(/[^a-zA-Z0-9]/g, '');
text1 = data.text.toUpperCase();
text1 = text1.replace(/[^a-zA-Z0-9]/g, '');
if (text1.indexOf(term) > -1 )
return data;
return false;
$('.js-example-basic-single').select2(
matcher: function(params, data)
return ignoreSpecialCharAndWhitespace(params, data);
);
</script>
</body>
</html>【讨论】：
以上是关于Select2 自定义搜索的主要内容，如果未能解决你的问题，请参考以下文章
我可以从我的自定义匹配器中访问原始的 select2 匹配器吗？
使用 select2 与 ajax 调用 asp.Net 服务自定义参数