// Search.svelte
<div class="search">
  <div class="search__input">
    <input type="text" class="textbox" placeholder="Search" on:input>
    {results}
  </div>
  {#if Array.isArray(results) && results.length > 0}
    <div class="search__results">
      {#await results}
        <p>Loading...</p>
      {:then results}
        {#if Array.isArray(results) && results.length > 0}
          <p>Result(): {results}</p>
        {/if}
      {:catch error}
        <p>Ooops! {error}</p>
      {/await}
    </div>
  {/if}
</div>

<script>
  export let results
</script>

// App.svelte
<main>
  <Search on:input={handleInput} results="{promise}"/>
</main>


<script>
    import axios from 'axios'
  import Search from './components/Search.svelte'

    let promise

  function handleInput({ target }) {
    promise = getSearchResults(target.value);
  }

  async function getSearchResults(value) {
    const response = await axios.get('http://localhost:5000/data.json');
      return response.data.words.filter(w => w.match(value)).slice(0, 10);
  }
</script>