How do I add headers to a jqueryui autocomplete call?

Question

I'm trying to add a http request-header to a jqueryui autocomplete request. I've looked at the documentation on the jquery site and the solution is presented there for ajax requests. I assumed the solution would be similar in my case but I can't get the darn thing to work.

Here is my code. It's wrapped in an angularjs diretive but the call inside the "link" method would be the same without it being inside the directive.

app.directive("buildingSearch", function () {
    // I bind the $scope to the DOM behaviors.
    function link(scope, element, attributes, controllers) {
        //Attach the autocomplete functionto the element
        element.autocomplete({
            source: 'api/building/unitOrgMdl',
            minLength: 2,

            //*********
            //This is the addition I made as per the jquery documentation that I figured would work but doesn't
            headers: {
                'Authorization': '122222222222'
            },
            //*********

            select: function (event, ui) {
                element.val(ui.item.label);
                element.blur();
                scope.getbuildings({ data: ui.item })
                return false;
            }
        });
    }

    // Return the directive confirugation.
    return ({
        link: link,
        restrict: "EA",
        replace: true,
        scope: {
            getbuildings: '&'
        }
    });
});

score 4 · Answer 1 · edited May 23 '17 at 10:28

I figured it out... and it works great! I cannot ensure it's the best way to do it but it seems pretty solid. I added the following code right before the autocomplete() method.

$.ajaxSetup({
    headers: { 'Authorization': '122222222222' }
});

So the new code in it's entirety looks like this.

app.directive("tmBuildingSearch", function (authService) {
    // I bind the $scope to the DOM behaviors.
    function link(scope, element, attributes, controllers) {
        //Attach the autocomplete function to the element
        //NEW CODE. This attaches a custom header
        $.ajaxSetup({
            headers: { 'Authorization': '122222222222' }
        });

        element.autocomplete({
            source: 'api/building/unitOrgMdl',
            minLength: 2,
            select: function (event, ui) {
                element.val(ui.item.label);
                element.blur();
                scope.getbuildings({ data: ui.item })
                return false;
            }
        });
    }

    // Return the directive configuration.
    return ({
        link: link,
        restrict: "EA",
        replace: true,
        scope: {
            getbuildings: '&'
        }
    });
});

I got the idea from another post on Stake Overflow.

How can I add a custom HTTP header to ajax request with js or jQuery?

I hope this helps someone else!

ENHANCEMENT NOTE! I removed this added code from the directive and put it in the main app module so ANY ajax call will get the Authorization header added to it. Works great!

How do I add headers to a jqueryui autocomplete call?

1 Answers1