Prevent $.ajaxStart() from being executed during jquery-ui autocomplete

Question

I'm using jquery-ui autocomplete on a page I'm creating. On the same page I have some ajax events going on. During the other ajax events I'm adding an overlay to my page, so that all the links on the website aren't clickable anymore for the user. I don't want that to happen during the autocomplete.

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

To prevent the ajaxstart function from being executed during the ajax events where it's not necessary. I add

global:false,

to the corresponding ajaxfunctions. How can I do something similar during the autocomplete without changing the jquery-ui source?

Answer 1

For this you have to omit the shorthand call with source and change the call like this.

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

The advantage of this long-hand method is

1. You can pass more than one parameter. Also the parameter name should not have to be term.
2. The short-hand notation expects an array of strings. Here you could return an array of objects also.

Answer 2

If you want $.ajax() to work a certain way most of the time but now all the time, then you probably shouldn't change its default behavior.

I recommend creating a function that wraps an ajax request in a function that enables and disables the overlay at the appropriate times. Call this function where you want the overlay to be used, and use plain $.ajax() for your autocomplete.