metonym / svelte-typeahead

Accessible, fuzzy search typeahead component
https://metonym.github.io/svelte-typeahead
MIT License
222 stars 18 forks source link

[Doc] How to use in sveltekit #77

Open saostad opened 1 year ago

saostad commented 1 year ago

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>