Inject dynamic additional parameters to url

[SneakyGerald]

Hi,

Is there any option to inject dynamic additional parameters to query string? For example:

https://remoteapi.com/?q=%QUERY%&token=12345

I know it is possible to set initial parameters in source:

source: {
  remote: {
    url: 'https://remoteapi.com/?q=%QUERY%&token=' + token,
    wildcard: '%QUERY%',
  },
}

However, it will inject a static initial value or null/undefined if it is not set yet when you set up typeahead instance, if it changes it will not get updated.

Any ideas?

Thank you,
Regards.

[niketpathak]

Hello @SneakyGerald , Thank you for your comment.

To pass more data via GET parameters, you can use a callback that returns a string. For example

typeahead({
  input: document.querySelector('.search'),
  source: {
    identifier: 'name',
    remote: {
      url: () => { 
          const token = window.token || ''; // get the necessary token
          return `https://restcountries.com/v2/name/%QUERY/?token=${token}` 
      },
      wildcard: '%QUERY',
    },
  },
  highlight: true,
  limit: 10
})

You can also pass more data using the requestOptions parameter of the remote/prefetch sources. (https://typeahead.digitalfortress.tech/#config?id=source)

An example using a remote source is shown below for further clarity

typeahead({
  input: document.querySelector('.search'),
  source: {
    identifier: 'name',
    remote: {
      url: 'https://restcountries.com/v2/name/%QUERY',
      wildcard: '%QUERY',
      requestOptions: {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: 'Clark Kent' }),
      },
    },
  },
  highlight: true,
  limit: 10
})

As per the above example, we pass additional data as a key-value pair ({ name: 'Clark Kent' })
You can use the same analogy for prefetch option as well.

Hope that helps!

[SneakyGerald]

Hi, yes I know how to pass additional data, but my question is how to pass dynamic data if typeahead instance is set up and I programmatically change the value of token, how I can update it in typeahead instance?

Example:
token initial value: 1234

url: () => { 
          const token = window.token || ''; // get the necessary token
          return `https://restcountries.com/v2/name/%QUERY/?token=${token}` 
},

It will create "https://restcountries.com/v2/name/%QUERY/?token=1234"

But if I programmatically change the value to 123456 it will still remain as 1234 in the URL as the initial value when the instance was created was 1234.

[niketpathak]

Hello @SneakyGerald, I'm not sure if you are updating the window.token correctly. Because the url() callback is executed each time the remote is called. So if you change the token correctly each time, it should update. Here is a JS fiddle showing this in action.

The remote API does not exist, so you will not see any suggestions, but kindly check the console log (or even the network tab) to see how the token is updated as expected.

[SneakyGerald]

Thanks @niketpathak I will check it, it could be related to vue 3 as I use it for my front-end.