Autocomplete2

An Input providing a popover list of suggestions as the user types.

Code

<script lang="ts">
  import { Input } from '@geoffcox/sterling-svelte';
</script>

<Input bind:value />

Members

Property Name	Type	Bindable	Default	Comment
values	string[] \| undefined	no	[]	The list of value sugestions to display.
item	Snippet<[string]> \| undefined	no	undefined	The item template to use for each value suggestion.
filter	(values: string[], text: string) => string[] \| undefined	no	undefined	The filter function to override which values are displayed as the user types. The default filter is a case-insensitive substring match.

Considerations

Autocomplete2 uses Popover2.
HTMLInputElement props are forwarded to the Input component.
Includes HTMLInputElement props, events, and methods.

Anatomy

<div class="sterling-autocomplete-2">
  <Input />
  <Popover>
    <div class="sterling-autocomplete-2-content">
      <List class="composed">
        <!-- <ListItem> ... -->
      </List>
    </div>
  </Popover>
</div>