Fuzzy Search

Version 0.9.0-next.31 for Svelte Kit ^1.0.1

This let's you search an array of strings or objects and get matches to data you need. This is best used inside of the typeahead function found on Input and IconButton.

Props

query string
The search query that you are using. When used the the typeahead component, the query will be passed in as the first argument in the function.

dataset Array<String|Object>
This is the data that you want to search through. This can be strings, or an object. You can provide options for the object properties you want to search through.

options Object
This is the data that you want to search through. This can be strings, or an object. You can provide options for the object properties you want to search through.

options?.sort boolean
Defaults to false. If you want the results sorted from best match to worst match.

options?.keys Array<String>
If you are passing an object, enter the keys you want to search by

Returns

Array<String|Object>
Returns a filtered and/or sorted version of the dataset.

<script>
  import { Input, fuzzySearch } from "bubbles-ui";

  const states = [
      {
        name: "Alabama",
        abbreviation: "AL",
      },
      {
        name: "Alaska",
        abbreviation: "AK",
      },
      ...,
      {
        name: "Wyoming",
        abbreviation: "WY",
      },
    ];

  const filtered = fuzzySearch("Califo", states, { keys: ["name", "abbreviation"], sort: true };
</script>