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

时间:2015-02-20 11:31:05

标签: javascript jquery html autocomplete loading

我有很多页面和jqgrid的很多内容 我在我的页面中加载jquery

但是,我希望jquery加载不在输入自动完成中显示

这是我的截图页面内容与jqgrid

enter image description here 这是我的截图jquery加载输入自动完成

enter image description here

我想在输入自动完成时不显示jquery加载:(

我的代码jquery加载在 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>

这是一个代码jquery自动完成

//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 );
                };

*注意:我将 scritpJs.php 包含在所有页面中

帮帮我,谢谢:)

2 个答案:

答案 0 :(得分:0)

尝试使用自动填充功能的ajax中的beforeSend

beforeSend : function(){
   showloader = false;
}

如下所示:

    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);
        }
      });
    },

答案 1 :(得分:0)

使用自动完成功能时,您应该设置showLoader = false(或使用其他变量)吗?然后在完成后将其设置为true。