I want to build a town-search functionality so i want to recall the API on every key stroke. Unfortunately my code is not working as expected.
Here is my code
<script lang="ts">
let query: string = ""
$: towns = fetch(`https://geocoding-api.open-meteo.com/v1/search?name=${query}&language=de`)
.then((response) => response.json())
.then((res) => {
return res
})
</script>
<input value={query} type="text" placeholder="Suchen" />
<pre><code>
{#await towns}
waiting
{:then towns}
{towns.results[0].name}
{:catch error}
error
{/await}
</code></pre>
When I initialize the query
var with a default value like let query: string = "Berlin"
the output is Berlin as expected but the output is not updating when i type in the input field.
What am I doing wrong?
CodePudding user response:
You did not bind the query, so it won't change. Should be this:
<input bind:value={query} ... />