jQuery Chosen插件-通过Ajax动态填充列表时显示“正在加载"图标 [英] Jquery Chosen plugin - Show Loading Icon while dynamically populating list by Ajax

问题描述

我正在使用Jquery选择1.5.1.通过ajax调用填充动态数据时，能否在检索过程中显示加载图标?

I am using Jquery Chosen 1.5.1. While populating dynamic data by ajax call, can I show loading icon while retrieving is in progress?

这是我正在使用的代码:

Here is the code I am using:

$("#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");
                    }));
                }
            })
        }

    }
});

推荐答案

我添加了以下代码来实现这一点，并且对我有用:

I have added the following code to implement that and it worked for me:

$('.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()
                }
            })
        }
    }
});

这篇关于jQuery Chosen插件-通过Ajax动态填充列表时显示“正在加载"图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！