By default, bloodhound.js will query via HTTP GET, but that leaves you vulnerable to JSON hijacking. Since I have sensitive information that I want to load into typeahead, HTTP GET leaves me vulnerable. There used to be an option for picking post (as shown here: typeahead.js remote beforesend post data issue), but that doesn't work with the latest version (v.0.11.1).

By default, bloodhound.js will query via HTTP GET, but that leaves you vulnerable to JSON hijacking. Since I have sensitive information that I want to load into typeahead, HTTP GET leaves me vulnerable. There used to be an option for picking post (as shown here: typeahead.js remote beforesend post data issue), but that doesn't work with the latest version (v.0.11.1).

• javascript
• typeahead.js
• bloodhound

• stackoverflow.com/a/46927923/3966458 without ajax – Saahithyan Vigneswaran Commented Oct 25, 2017 at 8:49

2 Answers 2

It took me lots of heartache and experimenting to get this. In the latest version (v.0.11.1) there is a transport function option, you can use this to delegate to whatever you want (websockets, or plain old $.ajax with a post).

var accountBloodhound = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,

    remote: {
        url: '/account/search#%QUERY',
        wildcard: '%QUERY',
        transport: function (opts, onSuccess, onError) {
            var url = opts.url.split("#")[0];
            var query = opts.url.split("#")[1];
            $.ajax({
                url: url,
                data: "search=" + query,
                type: "POST",
                success: onSuccess,
                error: onError,
            })
        }
    }
});

$('#remote .typeahead').typeahead(null, {
    name: 'best-pictures',
    display: 'value',
    source: accountBloodhound 
}).bind('typeahead:select', function (ev, suggestion) {
    console.log('Selection: ' + suggestion);
});

This Link will help

var searchAuto = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('word'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: base_url + 'ajax/get_words',
        prepare: function (q, rq) {

            $(".typeahead-loader").show();

            rq.data = {
                q: $("#SearchData").val(),
                // source: 'S01',
                searchtype: $("#Searchtype").val(),
                language: $("#language").val(),
                author: $("#author").val(),
                raag: $("#raag").val(),
                page_from: $("#page_from").val(),
                page_to: $("#page_to").val()
            };
            return rq;
        },
        transport: function (obj, onS, onE) {

            $.ajax(obj).done(done).fail(fail).always(always);

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

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

            function always() {
                $(".typeahead-loader").hide();
            }
        }
    }
});

if you console.log the obj, i.e, first param, you will get

and you can easily override the type in obj

obj.type = 'POST'

Hope this helps...