Taginput & Typeahead (Bloodhound) with Post (Ajax) doesnt seem to work

Question

i have tried many solutions suggested, but it seem like the Typeahead is just ignoring the beforeSend field.. This is my code:

var categories = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('attName'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'functions/suggestData.php',
        replace: function (url) {
            var q = '?start='+$('input:focus').val();

            var inputItems = elt.tagsinput('items');

            if(inputItems.length > 0)
                $.map(inputItems,function(val, i){
                   //val.attName
                });

            return url+q+"&rKey="+ Math.random();

        },

        beforeSend: function (jqXhr, settings){
            alert(1);
            jqXhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            settings.type = 'POST';
            settings.hasContent = true;
            settings.data = $.param({beneficiary: "test"});
        },
        cache: false

    }
});
var elt = $('.tagInput');
elt.tagsinput({
    itemValue: 'additionalData',
    itemText: 'attName',
    allowDuplicates:true,
    typeaheadjs: [{ minLength: 0},[{
        name: 'categories',
        displayKey: 'attName',
        source: categories,
        templates: {
            header: queryTemplateHeader
        }
    }]]
});

Now the data keep sending as "GET" without the post data.. (q: "test"), What am i missing?

Answer 1

Assuming you're on the 0.11 branch, there is no beforeSend, the settings attribute of prepare is the jQuery AJAX settings, so you code should look something like:

var categories = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('attName'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'functions/suggestData.php',
        replace: function (url) {

        },
        prepare: function(query, settings) {
            var url = settings.url;
            var q = '?start='+$('input:focus').val();
            var inputItems = elt.tagsinput('items');
            if(inputItems.length > 0)
                $.map(inputItems,function(val, i){
                   //val.attName
                });

            settings.url = url + q + "&rKey=" + Math.random();

            settings.contentType = 'application/x-www-form-urlencoded';
            settings.type = 'POST';
            settings.hasContent = true;
            settings.data = $.param({beneficiary: "test"});

            return settings;
        },
        cache: false
    }
});
var elt = $('.tagInput');
elt.tagsinput({
    itemValue: 'additionalData',
    itemText: 'attName',
    allowDuplicates:true,
    typeaheadjs: [{ minLength: 0},[{
        name: 'categories',
        displayKey: 'attName',
        source: categories,
        templates: {
            header: queryTemplateHeader
        }
    }]]
});