javascript - Jquery Chosen 插件 - 通过 Ajax 动态填充列表时显示加载图标

Question

我正在使用 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");
                    }));
                }
            })
        }

    }
});

Answer 1

我添加了以下代码来实现它，它对我有用:

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