Fuse

Wrapper for

fuse.js
.

⚡️ Prerequisites

npm install --save fuse.js
npm install --save fuse.js
sh

Usage

<script>
    import {fuse} from "@sveu/extend/fuse"

    const data = [
        {name: "John", age: 20},
        {name: "Jane", age: 21},
        {name: "Jack", age: 22},
    ]

    const {results} = fuse("John", data, {
        fuseOptions: {
            keys: ["name"]
        }
    })
</script>
<script>
    import {fuse} from "@sveu/extend/fuse"

    const data = [
        {name: "John", age: 20},
        {name: "Jane", age: 21},
        {name: "Jack", age: 22},
    ]

    const {results} = fuse("John", data, {
        fuseOptions: {
            keys: ["name"]
        }
    })
</script>
svelte

Example



    <script>
    import { fuse } from "@sveu/extend/fuse" 

    const data = [
    {
        firstName: "Roslyn",
        lastName: "Mitchell",
    },
    {
        firstName: "Cathleen",
        lastName: "Matthews",
    },
    {
        firstName: "Carleton",
        lastName: "Harrelson",
    },
    {
        firstName: "Allen",
        lastName: "Moores",
    },
    {
        firstName: "John",
        lastName: "Washington",
    },
    {
        firstName: "Brooke",
        lastName: "Colton",
    },
    {
        firstName: "Mary",
        lastName: "Rennold",
    },
    {
        firstName: "Nanny",
        lastName: "Field",
    },
    {
        firstName: "Chasity",
        lastName: "Michael",
    },
    {
        firstName: "Oakley",
        lastName: "Giles",
    },
    {
        firstName: "Johanna",
        lastName: "Shepherd",
    },
    {
        firstName: "Maybelle",
        lastName: "Wilkie",
    },
    {
        firstName: "Dawson",
        lastName: "Rowntree",
    },
    {
        firstName: "Manley",
        lastName: "Pond",
    },
    {
        firstName: "Lula",
        lastName: "Sawyer",
    },
    {
        firstName: "Hudson",
        lastName: "Hext",
    },
    {
        firstName: "Alden",
        lastName: "Senior",
    },
    {
        firstName: "Tory",
        lastName: "Hyland",
    },
    {
        firstName: "Constance",
        lastName: "Josephs",
    },
    {
        firstName: "Larry",
        lastName: "Kinsley",
    },
    ]

    let search = ""

    let matchWhenEmpty = false

    let limit

    let results = []

    $: ({ results } = fuse(search, data, { 
        fuseOptions: {
            keys: ["firstName", "lastName"],
        },
        matchWhenEmpty,
        limit,
    }))

</script>

<form class="flex flex-col justify-start">
    <div>
    <label for="search">Search</label>
    <input id="search" type="search" bind:value="{search}" />
    </div>
    <br/>
    <div>
    <label for="limit">limit</label>
    <input id="limit" type="number" bind:value="{limit}" />
    </div>

    <br/>

    <div>
    <label for="match_when_empty">Match When Empty</label>
    <input
        id="match_when_empty"
        type="checkbox"
        bind:checked="{matchWhenEmpty}" />
    </div>
</form>

<ul class="space-y-3 my-3 text-center">
    {#each results as result}
        <li>{`${result.item.firstName} ${result.item.lastName}`}</li>
    {/each}
</ul>
    <script>
    import { fuse } from "@sveu/extend/fuse" 

    const data = [
    {
        firstName: "Roslyn",
        lastName: "Mitchell",
    },
    {
        firstName: "Cathleen",
        lastName: "Matthews",
    },
    {
        firstName: "Carleton",
        lastName: "Harrelson",
    },
    {
        firstName: "Allen",
        lastName: "Moores",
    },
    {
        firstName: "John",
        lastName: "Washington",
    },
    {
        firstName: "Brooke",
        lastName: "Colton",
    },
    {
        firstName: "Mary",
        lastName: "Rennold",
    },
    {
        firstName: "Nanny",
        lastName: "Field",
    },
    {
        firstName: "Chasity",
        lastName: "Michael",
    },
    {
        firstName: "Oakley",
        lastName: "Giles",
    },
    {
        firstName: "Johanna",
        lastName: "Shepherd",
    },
    {
        firstName: "Maybelle",
        lastName: "Wilkie",
    },
    {
        firstName: "Dawson",
        lastName: "Rowntree",
    },
    {
        firstName: "Manley",
        lastName: "Pond",
    },
    {
        firstName: "Lula",
        lastName: "Sawyer",
    },
    {
        firstName: "Hudson",
        lastName: "Hext",
    },
    {
        firstName: "Alden",
        lastName: "Senior",
    },
    {
        firstName: "Tory",
        lastName: "Hyland",
    },
    {
        firstName: "Constance",
        lastName: "Josephs",
    },
    {
        firstName: "Larry",
        lastName: "Kinsley",
    },
    ]

    let search = ""

    let matchWhenEmpty = false

    let limit

    let results = []

    $: ({ results } = fuse(search, data, { 
        fuseOptions: {
            keys: ["firstName", "lastName"],
        },
        matchWhenEmpty,
        limit,
    }))

</script>

<form class="flex flex-col justify-start">
    <div>
    <label for="search">Search</label>
    <input id="search" type="search" bind:value="{search}" />
    </div>
    <br/>
    <div>
    <label for="limit">limit</label>
    <input id="limit" type="number" bind:value="{limit}" />
    </div>

    <br/>

    <div>
    <label for="match_when_empty">Match When Empty</label>
    <input
        id="match_when_empty"
        type="checkbox"
        bind:checked="{matchWhenEmpty}" />
    </div>
</form>

<ul class="space-y-3 my-3 text-center">
    {#each results as result}
        <li>{`${result.item.firstName} ${result.item.lastName}`}</li>
    {/each}
</ul>
    svelte
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    Click fold/expand code

    API

    Arguments

    Name Description Type Required
    search The text to search. string Yes
    data The data to search in. T[] Yes


    Options

    Name Description Type Default
    limit The maximum number of results to return. number Infinity
    matchWhenEmpty Whether to return all results when the search is empty. boolean undefined
    fuseOptions
    Read more
    		 Fuse.IFuseOptions<T> No default, required
    Last update at: Invalid Date