svelte-typeahead
svelte-typeahead copied to clipboard
[Doc] How to use in sveltekit
Hi, I had difficulty to get it to work with the Sveltekit, after some research found a solution. if it's acceptable please include it in the docs, so other people can use it.
<script>
import data from "./states.js";
import { onMount } from 'svelte';
let Typeahead;
onMount(async () => {
const module = await import("svelte-typeahead");
Typeahead = module.default || module;
});
let events = [];
</script>
{#if Typeahead}
<svelte:component this={Typeahead}
label="U.S. States"
placeholder={`Search U.S. states (e.g. "California")`}
{data}
extract={(item) => item.state}
disable={(item) => /Carolina/.test(item.state)}
on:select={({ detail }) => events = [...events, detail]}
on:clear={() => events = [...events, "clear"]}
/>
{/if}
<pre>{JSON.stringify(events, null, 2)}</pre>
<style>:global(input) { margin: 0; }</style>