时间戳

首页 > 解决方案 > Select2 自定义搜索

jquery - Select2 自定义搜索

问题描述

我有一个我们格式的选择框电话号码，我需要使用选择 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>

谢谢

标签： jqueryjquery-pluginsjquery-select2jquery-selectbox

解决方案

您可以使用下面的搜索功能来实现预期的结果：

<!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>

推荐阅读