javascript - 如何向选定的组合框添加加载旋转
问题描述
我正在使用 Jquery Chosen 1.5.1。通过ajax调用填充动态数据时,我可以在检索过程中显示加载图标吗?
这是我正在使用的代码:
$("#itemsList").chosen({
no_results_text: "Oops, nothing found!",
width: "100%",
inherit_select_classes: true
});
$('.chosen-choices input').autocomplete({
source: function(request, response) {
if (request.term.trim().length >= 3) {
Items.searchitemsByText(request.term, function(response) {
if (response && response.code == 0 && response.items.length > 0) {
($.map(response.items, function(item) {
$('ul.chosen-results').append('<li class="active-result">' + item.name + '</li>');
$('#itemsList').append('<option value="' + item._id + '">' + item.name + '</option>');
$("#itemsList").trigger("chosen:updated");
}));
}
})
}
}
});
解决方案
我添加了以下代码来实现它,它对我有用:
$('.chosen-choices input').autocomplete({
source: function(request, response) {
if (request.term.trim().length >= 3) {
// added to show loading icon
$('ul.chosen-results').append('<li class="active-result text-center" id=' + request.term + ' style="font-size:16px"><i class="fa fa-refresh fa-spin"></i></li>');
Items.searchitemsByText(request.term, brandId, function(response) {
if (response && response.code == 0 && response.items.length > 0) {
($.map(response.items, function(item) {
$('ul.chosen-results').append('<li class="active-result">' + item.name + '</li>');
$('#itemsListDropdown').append('<option value="' + item._id + '">' + ((!item.name || item.name == '') ? item.app_id : item.name) + '</option>');
$("#itemsListDropdown").trigger("chosen:updated");
}));
}
// removing loading icon
if (document.getElementById(request.term)) {
document.getElementById(request.term).remove()
}
})
}
}
});
推荐阅读
- azure-devops-extensions - 我创建了一个自动创建子任务的规则,但它不起作用
- php - 将图像上传到 tmp 文件夹时出现问题,调整大小然后上传到 S3 存储桶
- python - Project Euler 7. 10001st prime
- javascript - 为图像模式选择多个元素
- terminal - PhpStorm 中集成终端的问题
- python - parse_and_bind() 用于其他键
- php - PHP CURL 数组过滤器 - 日期变量
- css - Chrome 74 iframe 样式在页面交互(悬停、焦点、开发检查、窗口调整大小)之前不会生效
- c++ - 围绕 std::string 和 std::string_view 构建一个包装类
- javascript - 我已经为元素的宽度设置了动画,但是动画开始时元素的边框消失了