Typeahead.js: HTTP Request Headers not Being Added

[jarrodparkes]

Maybe I am using the API incorrectly, but I cannot get headers to be added to HTTP request.

See example here: https://gist.github.com/jarrodparkes/82d96c44edd5e9bfb9ac

(the commented $.ajax code at the bottom works without error, but not using Bloodhound)

[jarrodparkes]

I was able to get the request to work (with added headers); however, now I am having issues getting the games returned and populating the search field.

var games = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: "https://api.parse.com/1/classes/Game",
        filter: function (games) {
            console.log(games);

            // Map the remote source JSON array to a JavaScript object array
            return $.map(games.results, function (game) {
                return { value: game.title };
            });
        },                  
        transport: function (url, options, onSuccess, onError) {

            // Here, maybe log that we're about to look up remote data.
            var post = {
                url: "https://api.parse.com/1/classes/Game",
                // data: {
                //  query: 'where={"title":"Mario"}&limit=20'
                // },
                type: 'get',
                dataType: 'json',
                headers: {
                    'X-Parse-Application-Id': 'JT6wi7ESICu3tQXVVOLky2QpOMx8OMCKR7KsTQfH', 
                    'X-Parse-REST-API-Key': '4LIJm3z4bZOWs09IuTBuIFwvMqShHa57OyQIDrGq',
                    'content-type': 'application/json'
                }
            };

            // Here's where you'd do your custom lookup; for this example, we'll just use Jquery ajax as Bloodhound does.
            $.ajax(post, undefined).done(done).fail(fail).always(always);

            function done(data, textStatus, request) {
                // Don't forget to fire the callback for Bloodhound
                console.log(data);
                onSuccess(data);
            }

            function fail(request, textStatus, errorThrown) {
                // Don't forget the error callback for Bloodhound
                onError(errorThrown);
            }

            function always() {

            }
        },
        success: function(res) {
            console.log(res); 
        }
    }
});

// Initialize the Bloodhound suggestion engine
games.initialize();

// Instantiate the Typeahead UI
$('#nav-search input').typeahead(null, {
    hint: false,
    highlight: true,
    minLength: 2,
    displayKey: 'value',
    source: games.ttAdapter()
});

[jarrodparkes]

this was my own failure to read documentation. works now

[philippzentner]

what was wrong? It would be nice if you could share your solution here.

[nishadk123]

@jarrodparkes @philippzentner Can someone please help ?

I managed to add the headers in the settings parameter of the prepare function, returned the settings paramter as given below

remote: {
                url: APP.API_BASE + '/some/function/3/%QUERY',
                prepare: function (query, settings) {
                    settings.headers = {
                        'appid' : APP.APP_ID,
                        'token' : localStorageService.get('app-token'),
                        'scope' : 'app',
                        'lang' : 'en'
                    };
                    return settings;
                },
                wildcard: '%QUERY'
            }

But the problem is the "%QUERY" doesnot get replaced with the entered query, and goes as string "%QUERY" in the url. Do i need to pass it somewhere?

[nishadk123]

Figured it out.

When using the prepare function, the query has to be replaced manually.

remote: {
                url: APP.API_BASE + '/some/function/3/%QUERY',
                prepare: function (query, settings) {
                   settings.url = settings.url.replace('%QUERY', query);
                    settings.headers = {
                        'appid' : APP.APP_ID,
                        'token' : localStorageService.get('app-token'),
                        'scope' : 'app',
                        'lang' : 'en'
                    };
                    return settings;
                }
            }

The custom headers work just fine this way.

[politecnico855]

Excellent...!! @nishadk123