Ngăn không cho $ .ajaxStart() được thực thi trong khi jquery-ui tự động hoàn thành

Question

Tôi đang sử dụng tính năng tự động hoàn tất trên trang mà tôi đang tạo. Trên cùng một trang tôi có một số sự kiện ajax đang diễn ra. Trong các sự kiện ajax khác, tôi thêm lớp phủ vào trang của mình để tất cả các liên kết trên trang web không thể nhấp được nữa cho người dùng. Tôi không muốn điều đó xảy ra trong quá trình tự động hoàn thành.

autocomplete:

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

Để ngăn chặn chức năng ajaxstart khỏi bị thực hiện trong các sự kiện ajax nơi nó không cần thiết. Tôi thêm

global:false, 

vào các hàm ajaxfunctions tương ứng. Làm thế nào tôi có thể làm một cái gì đó tương tự trong quá trình tự động hoàn thành mà không thay đổi nguồn jquery-ui?

Answer 1

Nếu bạn muốn $.ajax() để làm việc một cách nào đó nhất thời gian nhưng bây giờ tất cả thời điểm đó, thì có thể bạn không nên thay đổi hành vi mặc định của nó.

Tôi khuyên bạn nên tạo một hàm kết thúc yêu cầu ajax trong một hàm cho phép và vô hiệu lớp phủ vào thời điểm thích hợp. Gọi hàm này nơi bạn muốn lớp phủ được sử dụng và sử dụng đồng bằng $.ajax() để tự động hoàn thành.

Answer 2

Đối với điều này, bạn phải bỏ qua cuộc gọi tốc ký với source và thay đổi cuộc gọi như thế này.

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

Ưu điểm của phương pháp dài tay này là

1. Bạn có thể vượt qua nhiều hơn một tham số. Tên tham số cũng không phải là thuật ngữ.
2. Ký pháp viết tay ngắn mong đợi một chuỗi các chuỗi. Ở đây bạn cũng có thể trả về một mảng các đối tượng.

Answer 3

Tôi đồng ý rằng câu trả lời của naveen là giải pháp tốt nhất. Trong trường hợp của tôi, số lượng lớn mã yêu cầu thay đổi không hiệu quả về chi phí khi chúng tôi đang trong quá trình viết lại và chúng tôi cần một giải pháp ngắn hạn.

Bạn có thể ghi đè cuộc gọi ajax trong giao diện người dùng jQuery, tôi đã sao chép nguồn cho lệnh gọi hàm _initSource xử lý yêu cầu AJAX. Sau đó, chỉ cần thêm toàn cầu: false vào các tùy chọn $ .ajax. Mã ở đây dựa trên jquery-ui 1.9.2, bạn có thể phải tìm đúng nguồn cho phiên bản của mình.

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