Skip to content

[Doc] How to use in sveltekit #77

@saostad

Description

@saostad

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions