Example with API endpoint

[mhkeller]

If you want to fetch results based on the input, where do you set the API endpoint? The demo page has this functionality but the source of the demo page is bundled and I don't see that site in a repo anywhere.

Thanks!

[elcobvg]

You have to use the component like this:

<AutoComplete 
  name="countries" 
  items="{countries}" 
  isAsync="true" 
  on:input="asyncData(event)" 
  on:change="set({ country: event })">
</AutoComplete>

and then have a method in the parent like this:

methods: {
  asyncData () {
    fetchData(apiUrl).then(data => {
      const countries = data.map(item => {
        const { name, alpha3Code } = item
        return {
          key: name,
          value: alpha3Code
        }
      })
      this.set({ countries })
    })
  }
}

[elviskudo]

hi elco, thanks for your useful components

i tried implement this component, but i have problem like this
Directive value must be a JavaScript expression enclosed in curly braces
how can i solve that?
my svelte version is 3

thanks a lot

[elcobvg]

Sorry, as soon as I have some time, I plan to update my Svelte components to v3.

[elviskudo]

oh thanks for your fast response and support

[sarahsalvini]

Was the Directive value must be a JavaScript expression enclosed in curly braces
ever resolved? I seem to still be getting the same error.