Prevent $ .ajaxStart() von während jquery-ui zur automatischen Vervollständigung ausgeführt wird

Question

ich jquery-ui zur automatischen Vervollständigung auf einer Seite verwende ich bin zu schaffen. Auf der gleichen Seite habe ich einige Ajax-Events. Während der anderen Ajax-Ereignisse füge ich meiner Seite ein Overlay hinzu, so dass alle Links auf der Website für den Benutzer nicht mehr anklickbar sind. Ich möchte nicht, dass das während der Autocomplete passiert.

zur automatischen Vervollständigung:

$(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(); 
}); 

von der ajaxstart Funktion Um zu verhindern, während der Ajax-Ereignisse ausgeführt werden, wo es nicht notwendig ist. Füge ich

global:false, 

zu den entsprechenden ajaxfunctions hinzu. Wie kann ich während der automatischen Vervollständigung etwas ähnliches tun, ohne die jquery-ui-Quelle zu ändern?

Answer 1

Wenn Sie $.ajax() wollen meisten der Zeit eine gewisse Art und Weise arbeiten, aber jetzt alle die Zeit, dann sollten Sie sich vielleicht nicht seine Standardverhalten ändern.

I empfehlen Erstellen einer Funktion, die ein Ajax-Anforderung in Abhängigkeit wickelt, die die Überlagerung an den geeigneten Zeitpunkten aktiviert und deaktiviert. Rufen Sie diese Funktion auf, wo das Overlay verwendet werden soll, und verwenden Sie einfach $.ajax() für Ihre automatische Vervollständigung.

Answer 2

Dazu geben Sie die Kurzanruf mit source wegzulassen haben und den Aufruf wie folgt ändern.

$('#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/' 
}); 

Der Vorteil dieser Methode lange Hand ist

1. Sie können mehr als einen Parameter übergeben. Auch sollte der Parametername kein Begriff sein.
2. Die Kurzschreibweise erwartet ein Array von Strings. Hier könnten Sie auch ein Array von Objekten zurückgeben.

Answer 3

würde ich, dass naveen Antwort stimmen die beste Lösung ist. In meinem Fall war die große Menge an Code, die geändert werden musste, nicht kosteneffektiv, da wir gerade eine Neuschreibung durchführen und wir eine kurzfristige Lösung benötigten.

Sie können den AJAX-Aufruf in der jQuery UI überschreiben, ich habe die Quelle für den Funktionsaufruf _initSource kopiert, der die AJAX-Anforderung verarbeitet. Fügen Sie dann einfach global: false zu den $ .ajax Optionen hinzu. Der Code hier basiert auf jquery-ui 1.9.2, möglicherweise müssen Sie die richtige Quelle für Ihre Version finden.

$.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; 
    } 
};