jquery-uiオートコンプリート中に$ .ajaxStart（）が実行されないようにします。

Question

私が作成しているページでjquery-uiオートコンプリートを使用しています。同じページに、私はいくつかのAjaxイベントが続いています。他のAjaxイベントでは、私は自分のページにオーバーレイを追加しています。そのため、Webサイト上のすべてのリンクはユーザーにとってクリック可能ではありません。私はオートコンプリートの間にそれが起こることを望んでいません。

オートコンプリート：

$(function() { 
    $("#search_input").autocomplete({ 
    source: '/search_autocomplete/',}); 
}); 

AJAX：

$.ajax({ 
    url: "/ajax_login/", 
      login_user: $("#login_user").val(), 
      password: $("#login_password").val(), 
      }); 

ajaxStart：

$("#loading_gif").ajaxStart(function() { 
    $("#overlay").show(); 
    $(this).show(); 
}); 

それは必要はありませんAJAXイベント中に実行されることからajaxstart機能を防ぐため。私は

global:false, 

を対応するajax関数に追加します。 jquery-uiソースを変更せずにオートコンプリート中に同様のことを行うにはどうすればよいですか？

Answer 1

あなたは$.ajax()は、特定の方法時間の最もが、今すべての時間を仕事をしたい場合は、あなたはおそらく、そのデフォルトの動作を変更しないでください。

適切なタイミングでオーバーレイを有効または無効にする関数でajaxリクエストをラップする関数を作成することをお勧めします。オーバーレイを使用する場所でこの関数を呼び出し、オートコンプリートとしてプレーン$.ajax()を使用します。

Answer 2

このためには、sourceという省略形の呼び出しを省略し、このような呼び出しを変更する必要があります。

$('#search_input').autocomplete({ 
    source: function (request, response) { 
     var DTO = { "term": request.term }; 
     //var DTO = { "term": $('#search_input').val() }; 
     $.ajax({ 
      data: DTO, 
      global: false, 
      type: 'GET', 
      url: '/search_autocomplete/', 
      success: function (jobNumbers) { 
       //var formattedNumbers = $.map(jobNumbersObject, function (item) { 
       // return { 
       //  label: item.JobName, 
       //  value: item.JobID 
       // } 
       //}); 
       return response(jobNumbers); 
      } 
     }); 
    } 
    //source: '/search_autocomplete/' 
}); 

この長い手の方法の利点は、あなたが複数のパラメータを渡すことができます

1. です。また、パラメータ名は用語である必要はありません。
2. 簡略表記では、文字列の配列が必要です。ここでもオブジェクトの配列を返すことができます。

Answer 3

naveenの回答が最良の解決策であることに同意します。私の場合、変更を必要とする膨大な量のコードは、私たちが書き直しを行う過程でコスト効率が悪く、短期的な解決策が必要でした。

jQuery UIでajax呼び出しをオーバーライドできます.AJAX要求を処理する_initSource関数呼び出しのソースをコピーしました。それから、global：falseを$ .ajaxオプションに追加するだけです。ここのコードはjquery-ui 1.9.2に基づいていますので、お使いのバージョンの正しいソースを見つけなければならないかもしれません。

$.ui.autocomplete.prototype._initSource = function() { 
    var array, url, 
     that = this; 
    if ($.isArray(this.options.source)) { 
     array = this.options.source; 
     this.source = function(request, response) { 
      response($.ui.autocomplete.filter(array, request.term)); 
     }; 
    } else if (typeof this.options.source === "string") { 
     url = this.options.source; 
     this.source = function(request, response) { 
      if (that.xhr) { 
       that.xhr.abort(); 
      } 
      that.xhr = $.ajax({ 
       url: url, 
       data: request, 
       dataType: "json", 
       global: false, 
       success: function(data) { 
        response(data); 
       }, 
       error: function() { 
        response([]); 
       } 
      }); 
     }; 
    } else { 
     this.source = this.options.source; 
    } 
};