select2 数据大 卡顿

当Select2下拉框中的数据量变大时，会出现卡顿问题，这是因为Select2默认会将所有选项都加载到下拉框中，导致页面加载缓慢。为了解决这个问题，可以使用Select2的Ajax加载功能，只有当用户输入时才会向服务器请求数据，从而提高了页面的响应速度。具体实现步骤如下：

1. 在HTML中引入Select2和jQuery库：

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

2. 在HTML中定义Select2下拉框：

<select id="mySelect" style="width: 300px;"></select>

3. 在JavaScript中初始化Select2，并使用Ajax加载数据：

$(document).ready(function() {
    $('#mySelect').select2({
        ajax: {
            url: 'data.php', // 向服务器请求数据的URL
            dataType: 'json',
            delay: 250, // 延迟250ms后开始请求
            data: function(params) {
                return {
                    q: params.term, // 用户输入的值
                    page: params.page
                };
            },
            processResults: function(data, params) {
                params.page = params.page || 1;
                return {
                    results: data.items,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }
                };
            },
            cache: true
        },
        placeholder: '请输入关键字',
        minimumInputLength: 1 // 用户至少输入1个字符才会触发Ajax请求
    });
});

4. 在服务器端（data.php）返回JSON格式的数据：

<?php
$q = $_GET['q'];
$page = $_GET['page'];
$pageSize = 30;
$start = ($page - 1) * $pageSize;
$end = $start + $pageSize;
$data = array();
$totalCount = 1000; // 总记录数
for ($i = $start; $i < $end; $i++) {
    if (strpos('' . $i, $q) !== false) {
        $data[] = array(
            'id' => $i,
            'text' => '选项' . $i
        );
    }
}
echo json_encode(array(
    'items' => $data,
    'total_count' => $totalCount
));
?>