data 介绍
使用 data 方式加载 5000 条静态数据，Select2 默认会展示全部数据，但下拉框最多可见 50 条（默认分页高度限制），其余选项需要滚动查看。
var data = [];
for (var i = 1; i <= 5000; i++) {
data.push({ id: i, text: “选项 ” + i });
}
$(‘#mySelect’).select2({ data: data });
说明
- 默认可见 50 条，但你可以滚动查看更多选项。
- 没有自动分页，所有数据一次性加载（可能影响性能）。
- 搜索可用，输入内容可筛选匹配的选项。
性能
1.页面卡顿：
Select2默认会将 5000 条数据渲染到 DOM，如果 HTML 结构复杂，可能导致浏览器卡顿。- 特别是在 低性能设备 或 移动端，加载时间会变长。
2.下拉框打开变慢：
Select2在打开下拉框时，需要渲染所有option，大数据量会影响 UI 交互流畅度。
3.搜索变慢：
Select2默认在前端过滤数据，如果 5000 条数据都在前端，会导致 搜索变慢，特别是在 低端浏览器 或 低配设备 上。
优化方案
1、开启分页模式（模拟 AJAX 加载）：
如果数据量很大（如 10,000+ 条），可以考虑：
$(‘#mySelect’).select2({
minimumInputLength: 1, // 输入 1 个字符后才显示选项
data: [], // 初始为空
ajax: {
transport: function (params, success, failure) {
var term = params.data.term || “”; // 获取用户输入
var filtered = data.filter(item => item.text.includes(term)); // 过滤本地数据
success({
results: filtered.slice(0, 50), // 每次返回最多 50 条
pagination: { more: filtered.length > 50 } // 是否还有更多数据
});
},
delay: 250 // 延迟搜索，提高体验
}
});
minimumInputLength: 1：
用户输入至少 1 个字符才触发搜索，避免初始加载太多数据。
ajax.transport：
不发送实际 AJAX 请求，而是在本地数据 data 中筛选匹配项。
filtered.slice(0, 50)：
限制每次返回最多 50 条，模拟服务器分页，提高性能。
agination.more：
true 代表有更多数据，false 代表到底了。
2、使用 templateResult 只渲染必要内容
默认 Select2 渲染的是完整的 option 标签，但你可以使用 templateResult 让 UI 变轻量：
$(‘#mySelect’).select2({
data: data,
templateResult: function (item) {
return $(‘<span>’).text(item.text); // 避免额外 HTML 渲染
}
});
3、使用 maximumSelectionLength 限制最大选择项数：
$(‘#mySelect’).select2({
data: data,
maximumSelectionLength: 5 // 最多可选 5 项
});
适用于多选
总结
- 如果数据量不大（如 100 条），不需要 AJAX，直接用
data即可，减少不必要的处理逻辑，提高代码简洁性！ - 如果数据量非常大（如 5000+ 条），可以使用 AJAX 或本地模拟分页加载。
- 如果数据是动态变化的（如从服务器获取），则 AJAX 方式更合适。