如何在自动完成中禁用jquery加载

Question

I have many pages and many content with jqgrid i give jquery loading in my pages

but, i want jquery loading not show in input autocomplete

this my screenshot pages content with jqgrid

and this my screenshot jquery loading in input autocomplete

I want jquery loading not show in input autocomplete :(

This my code jquery loading in scriptJS.php

<script>
    var showLoader = true;
    $( document ).ajaxStart(function() {
        showLoading( "show" );
    });
    $( document ).ajaxComplete(function() {
        showLoading( "remove" );
    });

    function showLoading( type )
    {
        if( showLoader === true)
        {
            if( type == "show" )
            {
                var html = '<div id="loadingAnimate" style="width:100%;height:100%;z-index:999999;background-color: rgba(0, 14, 30, 0.6);position:fixed;display:block;top:0;left:0;-moz-box-shadow: 1px 1px 6px #000000;-webkit-box-shadow: 1px 1px 6px #000000;box-shadow: 1px 1px 6px #000000;" >';
                    html += '<div style="background-color:#FFF;position:absolute;left:45%;top:30%;width:125px;height:150px;border-radius:8px" id="loadBar" >';
                    html += '<img width="75" style="margin-left:25px;margin-top:25px;margin-bottom:10px;" src="img/preloader.gif" />';
                    html += '<span style="margin-top:15px;font-size:15px;margin-left:23px;color:#34495E"><b>Please Wait</b></span>';
                    html += '</div>';
                    html += '</div>';

                $('body').append(html);
                $( "#loadingAnimate" ).fadeIn( "slow" );
            }
            else if( type == "remove" )
            {
                setTimeout(function(){ 
                    $('#loadingAnimate').fadeOut( "slow" ); 
                    $('#loadingAnimate').remove(); 
                }, 1200);           
            }
        }
        else
        {
            showLoader = true;
        }
    }
</script>

And this one of code jquery autocomplete

//Autocomplete Vendor Name
                        $( "#vendor_name" ).autocomplete({
                        source: function( request, response ) {
                        $.ajax({
                                url: "autoComplete.php?type=vendor_id",
                                dataType: "json",
                                data: {
                                        term: request.term
                                },
                                success: function( data ) {
                                        response( data );
                                }
                        });
                },
                            minLength: 2,
                            select: function( event, ui ) {
                                    $( "#vendor_name" ).val( ui.item.label );
                                    $( "#vendor_id" ).val( ui.item.name );

                                    return false;
                            },
                            open: function() {
                                    $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
                            },
                            close: function() {
                                    $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
                            }
                    }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
                    return $( "<li></li>" )
                        .data( "ui-autocomplete-item", item )
                        .append( "<a>" + item.label+ "</a>" )
                        .appendTo( ul );
                };

*Note : i include scritpJs.php to all pages

Help me, Thank's :)

Answer 1

try with beforeSend in the ajax of the autocomplete:

beforeSend : function(){
   showloader = false;
}

like as below:

    source: function(request, response) {
      $.ajax({
        url: "autoComplete.php?type=vendor_id",
        dataType: "json",
        beforeSend: function() { // add this
          showloader = false; // change to false
        },
        data: {
          term: request.term
        },
        success: function(data) {
          response(data);
        }
      });
    },

Answer 2

May be you should set showLoader = false (or use some other variable), when using autocomplete? And then set it back to true, when it's done.