typeahead.js remote beforesend post data issue

Question

I'd already posted this to the typeahead github, but I thought perhaps I could ask here and find an answer.

I'm trying to use a remote query as our of our datasources for typeahead. To do so I would want to create a POST and put my query parameters in the payload. When I set the settings.type to POST in the beforeSend function it works, but when I set the settings.data I am not seeing the data being set in my debuggers, and then in my example I use a simple http service which returns your payload, and this also verifies the data is not being sent. Underneath typeahead.js is using jQuery 1.9.1 and in particular using it's ajax beforeSend call. As far as I can tell looking at the jQuery ajax api I am setting the appropriate values in the typeahead beforeSend function.

Here is my code and running in jsfiddle http://jsfiddle.net/75mCa/2/

$('.autocomplete-es .typeahead').typeahead({
    name: 'es-tags',
    remote: {
        url: 'http://httpbin.org/post',
        beforeSend: function (jqXhr, settings) {

            console.log('type is initially : ' + settings.type);
            console.log('data is initially : ' + settings.data);

            settings.type = 'POST';
            settings.data = { fields: ['tags.tag'], query: { prefix: {  tag: 'emp' } } }
            //settings.contentType = 'application/json; charset=utf-8';

            console.log('type is now : ' + settings.type);
            console.log('data is now : ' + settings.data);

            //settings.processData = false;
            //settings.traditional = true;

            return true;
        },
        filter: function (data) {
            console.log(data.data);
            console.log(data.data.fields[0]);
            //do actual processing...for now just looking for this not to throw an error
        //    return data.hits.hits[0].fields.tags.tag;
        }
    }
});

Thanks for any help, G

Answer 1

I have this exact same use case (integrate typehead.js with elasticsearch), and ran into the same problem. The problem ends up being that the line of code in jquery that is checking whether or not you have form data to POST is:

xhr.send( ( s.hasContent && s.data ) || null );

... and so just go ahead and set s.hasContent=true in beforeSend and everything works.