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.
Installation:
To install the “svelte-typeahead” component, follow the steps below:
- Install the package using npm or yarn:
npm install svelte-typeahead
or
yarn add svelte-typeahead
- Import the component in your Svelte project:
import { Typeahead } from "svelte-typeahead";
- Use the component in your Svelte template:
<Typeahead {data} {extract} />
Note: You need to pass an array of objects to the “data” prop and use the “extract” prop to specify the value to search on.
Summary:
The “svelte-typeahead” component is a fuzzy search typeahead component that is focused on accessibility. It provides various features such as custom labels, hidden labels, custom-styled results, handling for no results, limiting the number of displayed results, and more. The component can be easily installed and used in a Svelte project using npm or yarn.
