SvelteKit updating a request

Question

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" class="input input-bordered w-full max-w-xs mb-8"/>

<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?

Answer 1

You did not bind the query, so it won't change. Should be this:

<input bind:value={query} ... />