Jquery Chosen Plugin - Show Loading Icon While Dynamically Populating List By 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').ch

Solution 1:

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 iconif (document.getElementById(request.term)) {
                    document.getElementById(request.term).remove()
                }
            })
        }
    }
});

Solution 2:

You can use jquery ajax beforeSend: for put a loader before ajax response come