Select2-js 自定义查询

Select2.js 自定义搜索

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    
</head>
<body>
    <select class="js-example-basic-single" name="state" style="width: 200px">
      <option value="AL" title="12" data-search="ng">你好</option>
      <option value="WY" data-search="nk|nanke" >男科</option>
    </select>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.js-example-basic-single').select2({
                //matchCustom 自定义的筛选函数
                matcher: matchCustom
            });
        });
        function matchCustom(params, data) {
            // If there are no search terms, return all of the data
            if ($.trim(params.term) === '') {
              return data;
            }

            // Do not display the item if there is no 'text' property
            if (typeof data.text === 'undefined') {
              return null;
            }

            if (data.text.indexOf(params.term) > -1 || String($(data.element).data('search')).indexOf(params.term) > -1) {
              return data;
            }
            return null;
        }
    </script>
</body>
</html>
posted @ 2018-10-12 17:51  周瑜已被使用  阅读(34)  评论(0)    收藏  举报  来源