How to use typeahead wildcard

Question

I'm trying to use typeahead for the first time. I would like to update the url parameters based on the user input. The wild card is not being translated and the value "QUERY" is being sent to the remote server.

Any help would be appreciate :)

 myTypeahead = $('.typeahead').typeahead(
  {
    hint: true,
    highlight: true,
    minLength: 1
  },
  {
    name: 'addresses',
    source: addressResults = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.whitespace,
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      remote: {
              url:'https://urlpath/Search?query=%QUERY&country=GBR',            
              wildcard: '%QUERY',
              filter: function (data) {      
                  // Map the remote source JSON array to a JavaScript object array
                  return $.map(data.results, function(results,index) {  
                      return results.suggestion;
                  });
              },
              prepare: function (query, settings) {
                    settings.headers = {
                        'Auth-Token' : '1212'
                    };
                    return settings;
              }
       }
    })
  }
  ).on('keyup');

Answer 1

When you use prepare, you need to manually handle the wildcard value. See the documentation for remote

For example:

 prepare: function(query, settings) {
    settings.url += '?q=' + query;
    return settings;
  },

Here is the associated fiddle.