Select2在打开10.000+元素方面进展缓慢
Select2在打开10.000+元素方面进展缓慢
提问于 2019-02-22 06:52:28
我正在使用Select2填充下拉列表。如果基础选择有相当数量的项，则Select2在打开下拉菜单时速度很慢。在我的下拉列表中，我有超过10.000+的元素。
这是我的代码：
$.ajax({
url: "/Companies/GetCompanies",
method: "get",
success: function (data) {
if (data != null) {
var newWorkPlaceId = $("#newWorkPlaceId");
newWorkPlaceId.empty();
newWorkPlaceId.append("<option value=''> -- Choose-- </option>");
$.each(data, function (index, item) {
newWorkPlaceId.append(
$('<option>', {
value: item.id,
text: item.text
}, '</option>'));
});
$("#newWorkPlaceId").select2({
placeholder: {
id: "",
placeholder: " -- Choose--"
},
allowClear: true
});
}
clearconsole();
}
});是否有办法使Select2小部件(或另一个可搜索的下拉列表)更快地响应？
注意:我使用的是ASP.NET核心
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-03-01 13:02:14
经过长时间的研究，我发现两个符号的限制将帮助我解决这个问题。这是我的解决办法
$("#newWorkPlaceId").select2({
allowClear: true,
placeholder: {
id: "",
placeholder: "Choose."
},
language: {
inputTooShort: function (args) {
return "2 or more symbol.";
},
noResults: function () {
return "Not Found.";
},
searching: function () {
return "Searching...";
}
},
minimumInputLength: 2,
ajax: {
url: 'url',
dataType: 'json',
type: "GET",
quietMillis: 50,
data: function(term) {
return {
term: term.term
};
},
processResults: function (response) {
return {
results: response
};
}
}
});Stack Overflow用户
发布于 2019-02-22 07:03:14
您必须使用AJAX数据和分页，如下所示
$('#mySelect2').select2({
ajax: {
url: 'https://api.github.com/search/repositories',
data: function (params) {
var query = {
search: params.term,
page: params.page || 1
}
// Query parameters will be ?search=[term]&page=[page]
return query;
}
}
});示例
$('#mySelect2').select2({
ajax: {
url: function (params) {
return 'https://api.github.com/search/repositories?q='+params.term+'&page='+params.page || 1;
},
processResults: function (data) {
return {
results: $.map(data.items, function (item) {
return {
text: item.name,
id: item.id
}
})
};
}}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select style="width:50%" id="mySelect2"></select>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54821596
复制相关文章
相似问题
腾讯云开发者
