lucent-laravel/front/js/svelte/autocomplete/Autocomplete.svelte

<script>
    import Selectlist from "./Selectlist.svelte";
    import Icon from "../../common/Icon.svelte";

    let searchEl;
    let search;
    export let value;
    export let field;

    function handleSelect() {
        searchEl.focus();
        searchEl.blur();
    }
</script>

<div class="autocomplete">
    <input
        type="search"
        bind:value={search}
        bind:this={searchEl}
        placeholder="Search for options"
        autocomplete="off"
    />
    <div class="autocomplete-results">
        <Selectlist {field} bind:value bind:search on:selected={handleSelect} />
    </div>
</div>
{#if value}
    <div class="autocomplete-selected-value">
        {#if Array.isArray(field.selectOptions)}
            {value}
        {:else}
            {field.selectOptions[value]}
        {/if}
        <button
            on:click|preventDefault={(e) => (value = "")}
            type="button"
            class="button-text"
            aria-label="Close"
        >
            <Icon width={12} height={12} icon="close"></Icon>
        </button>
    </div>
{/if}