Typeahead/Bloodhound - Using Jquery Ajax for remote causes only a single server side request

Question

I need to use a jquery ajax setup in Bloodhound's remote property since I have a server side page that takes POST requests only. Everything works, but just once. Any subsequent change to the text in the typeahead input box calls the filter function, but does not fire a new server side request to fetch new data. It just filters through the data that it got in the first request. I need for it make a new request as the user removes the text and types in something else.

I am new to typeahead and I am spending way too much time trying to figure this out. Here is my code.

var users = new Bloodhound({
        datumTokenizer: function (d) {
            return Bloodhound.tokenizers.whitespace(d.value);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote:   {
            url: 'fake.jsp',
            filter: function (users) {
                return $.map(users, function (user) {
                    return {
                        value: user.USER_ID,
                        name: user.DISPLAYNAME
                    };
                });
            },
            ajax: {
                type: 'POST',
                data: {
                    param: function(){
                        return $('#userid').val();
                    }
                },
                context: this
            }
        }
    });
    users.initialize(true);

    $('#userid').typeahead({
          minLength: 3,
          highlight: true
        }, {
          name: 'userslist',
          displayKey: 'name',
          source: users.ttAdapter()
    });

Answer 1

I had the same solution and discovered jQuery's cache: false; option does not work in this situation for whatever reason. Here is the solution I found:

   remote: {
        url: ...
        replace: function(url, query) {
            return url + "#" + query; // used to prevent the data from being cached. New requests aren't made without this (cache: false setting in ajax settings doesn't work)
        }
    }

Answer 2

try this:

   remote:   {
               url: 'fake.jsp/?' + Math.random(),
   .
   .
   .

it's not really the solution but at least the results will be fetched from server everytime the page is refreshed.