添加负载搜索微调器

Question

I am using Ajax to search for cities and Locations, I am facing two main problems First one the query last 5 seconds that is very slow I didn't know how to add a spinner of waiting while search is happening This is part of the code

 $('#firstadress').autocomplete({
        serviceUrl: '/autosearch',
        onSearchStart: function (suggestion) {
            $(this).addClass('searching');
         /* here where I want to added code */

        },
        onSearchComplete: function (suggestion) {
            $(this).removeClass('searching');
        },

How can I ameliorate this question .

Thanks in advance

Answer 1

you need to add loader in search function and remove it in response function which is already present in autocomplete.

<style type="text/css">
    .loader
    {
        background: url(loader.gif); // you loader url
        background-repeat: no-repeat;
        background-position: right;
    }
</style>

<script type="text/javascript">
    $(function () {
        $("#txtSearch").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: 'url',
                    data: "{ 'prefix': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.split('-')[0],
                                val: item.split('-')[1]
                            }
                        }))
                    }
                });
            },
            search: function (e, u) {
                $(this).addClass('loader');
            },
            response: function (e, u) {
                $(this).removeClass('loader');
            }
        });
    });
</script>
Enter search term: <input type="text" id="txtSearch" />