Autocomplete

Autocomplete is used to search and pick a value from a list of options.

Basic

Label

You're doing it wrong!

svelte

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

	const email = "svg-path";

   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" bind:value={value} on:input={filter}>
	<Autocomplete.Label slot="label">Label</Autocomplete.Label>
	<Autocomplete.Leading slot="leading" data={email} />
	<Autocomplete.Options slot="options">
		{#if filtered.length > 0}
			{#each filtered as option}
				<Autocomplete.Options.Option {option} />
			{/each}
		{:else}
			<Autocomplete.Options.EmptyOption />
		{/if}
	</Autocomplete.Options>
</Autocomplete>

Any Value

svelte

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

   let value = 'I am not in the list!';

   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}
	allowNonListValue
>
	<Autocomplete.Options slot="options">
		{#if filtered.length > 0}
			{#each filtered as option}
				<Autocomplete.Options.Option {option} />
			{/each}
		{:else}
			<Autocomplete.Options.EmptyOption />
		{/if}
	</Autocomplete.Options>
</Autocomplete>

Autocomplete Props

name	string
error	string
placeholder	string
value	string
allowNonListValue	boolean	false
options	string[]	[]

Autocomplete Slots

label	<Autocomplete.Label slot="label" />
leading	<Autocomplete.Leading slot="leading" />
options	<Autocomplete.Options slot="options" />

Autocomplete.Label Slots

default

Autocomplete.Leading Props

data	string (IconData)
viewBox	string	0 0 24 24
size	string	24px
width	string	24px
height	string	24px
color	string	currentColor
stroke	string \| undefined
fill	string	currentColor

Autocomplete.Options Slots

default	<Autocomplete.Options.Option />
default	<Autocomplete.Options.EmptyOption />

Autocomplete.Options.Option Props

option

string

Autocomplete.Options.EmptyOption Slots

default