svelte-typeahead icon indicating copy to clipboard operation
svelte-typeahead copied to clipboard

[Doc] How to use in sveltekit

Open saostad opened this issue 1 year ago • 0 comments

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>

saostad avatar Mar 27 '23 00:03 saostad