How to use a group typeahead template

Question

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

Any help would be appreciated :)

 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 process the wildcard value. See the documentation for the remote .

For instance:

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

Here is the related script .