Svelte Typeahead

Overview:

The "svelte-typeahead" component is a fuzzy search typeahead component that is focused on accessibility. It uses the lightweight fuzzy library for client-side fuzzy search and follows WAI-ARIA guidelines. This component can be used in the Svelte REPL and offers various features for customization and accessibility.

Features:

• Basic Usage: Pass an array of objects to the data prop and use the extract prop to specify the value to search on.
• Custom label: Use the label prop to specify a custom label for the typeahead component.
• Hidden label: Set hideLabel to true to visually hide the label while still maintaining accessibility.
• Custom-styled results: The component uses the fuzzy library to highlight matching characters with the mark element. You can use the default slot to render custom results.
• No results handling: Use the "no-results" slot to render a message if the search value does not yield any results.
• Limiting the number of results: Use the limit prop to specify the maximum number of results to display. The default value is Infinity.
• Disabled items: Disable items using the disable filter. Disabled items are not selectable or navigable by keyboard.
• Focus after select: Set focusAfterSelect to true to re-focus the search input after selecting a result.
• Show dropdown on focus: By default, the dropdown will be shown if the value has results. Set showDropdownOnFocus to true to only show the dropdown when the search input is focused.
• Show all results on focus: By default, no results are shown if an empty input (i.e., value="") is focused. Set showAllResultsOnFocus to true for all results to be shown when an empty input is focused.