Select2 自定义搜索

Question

我有一个 select 框 phone 美国格式的数字，我需要使用 select 搜索带或不带格式的值 2.

例如

Select 框值包括

(111) 222-3333

(222) 333-4444

(444) 555-6666

现在我的 select 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>

谢谢

Answer 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 custom search

jquery

jquery-plugins

jquery-selectbox

jquery-select2