52 lines
1.2 KiB
Svelte
52 lines
1.2 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}
|