45 lines
1.1 KiB
Svelte
45 lines
1.1 KiB
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}
|