Fuse.js binding for fuzzy text match highlighting.
Yarn
yarn add -D svelte-fuzzyNPM
npm i -D svelte-fuzzy<script>
import Fuzzy from "svelte-fuzzy";
let query = "old";
// Fuse.js options
let options = { keys: ["title"] };
// Fuse.js data
let data = [
{
title: "Frankenstein; Or, The Modern Prometheus",
author: "Mary Wollstonecraft Shelley",
},
{
title: "A Christmas Carol in Prose; Being a Ghost Story of Christmas",
author: "Charles Dickens",
},
{ title: "Pride and Prejudice", author: "Jane Austen" },
{ title: "The Scarlet Letter", author: "Nathaniel Hawthorne" },
{ title: "Alice's Adventures in Wonderland", author: "Lewis Carroll" },
];
let formatted = [];
</script>
<input bind:value={query} />
<br />
<button on:click={() => (query = "carol")}>Search "carol"</button>
<button on:click={() => (query = "")}>Clear</button>
<Fuzzy {query} {data} {options} bind:formatted />
{#each formatted as item}
{#each item as line}
<li>
{#each line as { matches, text }}
{#if matches}
<mark>{text}</mark>
{:else}
{text}
{/if}
{/each}
</li>
{/each}
{/each}You can use the Highlighter component for fuzzy text highlighting. Matching characters are wrapped in a mark element.
<script>
import { Highlighter } from "svelte-fuzzy";
</script>
{#each formatted as item}
{#each item as line}
<li>
<Highlighter {line} />
</li>
{/each}
{/each}| Prop name | Value |
|---|---|
| query | string (default: "") |
| data | FuzzyData (default: []) |
| options | FuzzyOptions |
| result | FuzzyResult (default: []) |
| formatted | FuzzyFormattedResult (default: []) |
| Prop name | Value |
|---|---|
| line | HighlighterLine (default: []) |
Svelte version 3.31 or greater is required to use this component with TypeScript.
TypeScript definitions are located in the types folder.