Autocomplete

Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.

Selected: [ ↘ bottom_right ]
Created: [ ]

placeholder

empty

predictable

creatable

objects

groups

<script>
    import { Autocomplete } from 'svelte-spectre'

    let predefined = [
            'top_left',
            'top_center',
            'top_right',
            'center_left',
            'center_center',
            'center_right',
            'bottom_left',
            'bottom_center',
            'bottom_right',
        ],
        groups = [
            '↖ top_left',
            '↑ top_center',
            '↗ top_right',
            '← center_left',
            '✛ center_center',
            '→ center_right',
            '↙ bottom_left',
            '↓ bottom_center',
            '↘ bottom_right',
        ],
        selected = []

    const groupsBy = (item) => {
        return groups.split(', ').find((g) => item.value.includes(g))
    }
</script>

<Autocomplete
    {predefined}
    bind:selected
    bind:created
    placeholder="type here"
    empty="No suggested"
    {groupBy}
/>
<small>Selected: [ {selected.map(s => s.label).join(', ')} ]</small>
<small>Created: [ {created.map(s => s.label).join(', ')} ]</small>