<script lang="ts">
   import { Autocomplete } from 'stwui';

   let value: string;

   let options = ['Option 1', 'Option 2', 'Option 3'];

   function filter(e: Event) {
		const target = e.target as HTMLInputElement;
		filtered = options.filter((opt) => opt.toLowerCase().includes(target.value.toLowerCase()));
	}

   function filterOptions(option: string) {
      if (option) {
         filtered = options.filter((opt) => opt.toLowerCase().includes(option.toLowerCase()));
      } else {
         filtered = options;
      }
	}

	$: filterOptions(value);
</script>

<Autocomplete name="autocomplete" placeholder="Basic" bind:value={value} on:input={filter}>
   <Autocomplete.List slot="list">
      {#if filtered.length > 0}
         {#each filtered as option}
            <Autocomplete.List.Option value={option} selected={value === option} />
         {/each}
      {:else}
         <Autocomplete.List.EmptyOption />
      {/if}
   </Autocomplete.List>
</Autocomplete>