{"id":16791958,"url":"https://github.com/metonym/svelte-typeahead","last_synced_at":"2025-04-08T00:35:34.333Z","repository":{"id":37332884,"uuid":"255921280","full_name":"metonym/svelte-typeahead","owner":"metonym","description":"Accessible, fuzzy search typeahead component","archived":false,"fork":false,"pushed_at":"2025-01-20T18:34:12.000Z","size":595,"stargazers_count":225,"open_issues_count":17,"forks_count":19,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-31T23:33:53.856Z","etag":null,"topics":["accessibility","filter","fuzzy","highlight","search","typeahead","typescript-definitions","wai-aria"],"latest_commit_sha":null,"homepage":"https://metonym.github.io/svelte-typeahead","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/metonym.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-15T13:13:47.000Z","updated_at":"2025-02-09T13:05:35.000Z","dependencies_parsed_at":"2024-06-17T16:55:25.586Z","dependency_job_id":"440b03fa-ffad-4e74-8cf9-424502afb63e","html_url":"https://github.com/metonym/svelte-typeahead","commit_stats":{"total_commits":120,"total_committers":6,"mean_commits":20.0,"dds":0.09166666666666667,"last_synced_commit":"569fdd7fc8c81a34217dd03785c9bbbc0e73eef0"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelte-typeahead","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelte-typeahead/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelte-typeahead/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelte-typeahead/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/metonym","download_url":"https://codeload.github.com/metonym/svelte-typeahead/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247755557,"owners_count":20990620,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","filter","fuzzy","highlight","search","typeahead","typescript-definitions","wai-aria"],"created_at":"2024-10-13T08:43:40.098Z","updated_at":"2025-04-08T00:35:34.300Z","avatar_url":"https://github.com/metonym.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-typeahead\n\n[![NPM][npm]][npm-url]\n\n\u003e Accessible, fuzzy search typeahead component.\n\n\u003c!-- REPO_URL --\u003e\n\nThis component uses the lightweight [fuzzy](https://github.com/mattyork/fuzzy) library for client-side, fuzzy search and follows [WAI-ARIA guidelines](https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html).\n\nTry it in the [Svelte REPL](https://svelte.dev/repl/a1b828d80de24f7e995b2365782c8d04).\n\n---\n\n\u003c!-- TOC --\u003e\n\n## Installation\n\n```bash\n# npm\nnpm i svelte-typeahead\n\n# pnpm\npnpm i svelte-typeahead\n\n# Yarn\nyarn add svelte-typeahead\n\n# Bun\nbun add svelte-typeahead\n```\n\n## Usage\n\n### Basic\n\nPass an array of objects to the `data` prop. Use the `extract` prop to specify the value to search on.\n\n```svelte\n\u003cscript\u003e\n  import Typeahead from \"svelte-typeahead\";\n\n  const data = [\n    { state: \"California\" },\n    { state: \"North Carolina\" },\n    { state: \"North Dakota\" },\n    { state: \"South Carolina\" },\n    { state: \"South Dakota\" },\n    { state: \"Michigan\" },\n    { state: \"Tennessee\" },\n    { state: \"Nevada\" },\n    { state: \"New Hampshire\" },\n    { state: \"New Jersey\" },\n  ];\n\n  const extract = (item) =\u003e item.state;\n\u003c/script\u003e\n\n\u003cTypeahead {data} {extract} /\u003e\n```\n\n### Custom label\n\n`$$restProps` are forwarded to [svelte-search](https://github.com/metonym/svelte-search).\n\nUse the `label` prop to specify a custom label.\n\n```svelte\n\u003cTypeahead label=\"U.S. States\" {data} {extract} /\u003e\n```\n\n### Hidden label\n\nSet `hideLabel` to `true` to visually hide the label.\n\nIt's recommended that you set the `label` – even if hidden – for accessibility.\n\n```svelte\n\u003cTypeahead label=\"U.S. States\" hideLabel {data} {extract} /\u003e\n```\n\n### Custom-styled results\n\nThis component uses the [fuzzy](https://github.com/mattyork/fuzzy) library to highlight matching characters with the [mark](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark) element.\n\nUse the default slot to render custom results.\n\n```svelte\n\u003cTypeahead {data} {extract} let:result let:index\u003e\n  \u003cstrong\u003e{@html result.string}\u003c/strong\u003e\n  {index}\n\u003c/Typeahead\u003e\n```\n\n### No results\n\nUse the \"no-results\" slot to render a message if the search value does not yield results.\n\n```svelte\n\u003cTypeahead value=\"abcd\" {data} {extract} let:value\u003e\n  \u003csvelte:fragment slot=\"no-results\"\u003e\n    No results found for \"{value}\"\n  \u003c/svelte:fragment\u003e\n\u003c/Typeahead\u003e\n```\n\n### Limit the number of results\n\nUse the `limit` prop to specify the maximum number of results to display. The default is `Infinity`.\n\n```svelte\n\u003cTypeahead limit={2} {data} {extract} /\u003e\n```\n\n### Disabled items\n\nDisable items using the `disable` filter. Disabled items are not selectable or navigable by keyboard.\n\nIn the following example, items with a `state` value containing \"Carolina\" are disabled.\n\n```svelte\n\u003cTypeahead\n  {data}\n  value=\"ca\"\n  extract={(item) =\u003e item.state}\n  disable={(item) =\u003e /Carolina/.test(item.state)}\n/\u003e\n```\n\n### Focus after select\n\nSet `focusAfterSelect` to `true` to re-focus the search input after selecting a result.\n\n```svelte\n\u003cTypeahead focusAfterSelect {data} {extract} /\u003e\n```\n\n### Show dropdown on focus\n\nBy default, the dropdown will be shown if the `value` has results.\n\nSet `showDropdownOnFocus` to `true` to only show the dropdown when the search input is focused.\n\n```svelte\n\u003cTypeahead value=\"ca\" showDropdownOnFocus {data} {extract} /\u003e\n```\n\n### Show all results on focus\n\nBy default, no results are shown if an empty input (i.e., `value=\"\"`) is focused.\n\nSet `showAllResultsOnFocus` to `true` for all results to be shown when an empty input is focused.\n\n```svelte\n\u003cTypeahead showAllResultsOnFocus {data} {extract} /\u003e\n```\n\n### Styling\n\n**Note:** this component is minimally styled by design. You can target the component using the `[data-svelte-typeahead]` selector.\n\n```css\n:global([data-svelte-typeahead]) {\n  margin: 1rem;\n}\n```\n\n## API\n\n### Props\n\n| Name                  | Type                                                                       | Default value     | Description                                                                                                                           |\n| :-------------------- | :------------------------------------------------------------------------- | :---------------- | :------------------------------------------------------------------------------------------------------------------------------------ |\n| value                 | `string`                                                                   | `\"\"`              | Input search value.                                                                                                                   |\n| data                  | `TItem[]`                                                                  | `[]`              | Items to search.                                                                                                                      |\n| extract               | `(TItem) =\u003e any`                                                           | `(item) =\u003e item`  | Target the value if `TItem` is an object.                                                                                             |\n| disable               | `(TItem) =\u003e boolean`                                                       | `(item) =\u003e false` | Disabled items are shown in results but are not selectable.                                                                           |\n| filter                | `(TItem) =\u003e boolean`                                                       | `(item) =\u003e false` | Filtered out items will not be displayed in the results.                                                                              |\n| autoselect            | `boolean`                                                                  | `true`            | Whether to automatically select the first result.                                                                                     |\n| inputAfterSelect      | `\"update\" \\| \"clear\" \\| \"keep\"`                                            | `\"update\"`        | Set to `\"clear\"` to clear the `value` after selecting a result. Set to `\"keep\"` to keep the search field unchanged after a selection. |\n| results               | `FuzzyResult[]`                                                            | `[]`              | Raw fuzzy results from the [fuzzy](https://github.com/mattyork/fuzzy) module                                                          |\n| focusAfterSelect      | `boolean`                                                                  | `false`           | Set to `true` to re-focus the input after selecting a result.                                                                         |\n| showDropdownOnFocus   | `boolean`                                                                  | `false`           | Set to `true` to only show results when the input is focused.                                                                         |\n| showAllResultsOnFocus | `boolean`                                                                  | `false`           | Set to `true` for all results to be shown when an empty input is focused.                                                             |\n| limit                 | `number`                                                                   | `Infinity`        | Specify the maximum number of results to display.                                                                                     |\n| `...$$restProps`      | (forwarded to [`svelte-search`](https://github.com/metonym/svelte-search)) | N/A               | All other props are forwarded to the input element.                                                                                   |\n\n### Dispatched events\n\n- **on:select**: dispatched when selecting a result\n- **on:clear**: dispatched when clearing the input field\n\n```svelte\n\u003cscript\u003e\n  import Typeahead from \"svelte-typeahead\";\n\n  let e = [];\n\u003c/script\u003e\n\n\u003cTypeahead\n  {data}\n  {extract}\n  on:select={({ detail }) =\u003e (e = [...e, { event: \"select\", detail }])}\n  on:clear={() =\u003e (e = [...e, { event: \"clear\" }])}\n/\u003e\n\n\u003cpre\u003e{JSON.stringify(e, null, 2)}\u003c/pre\u003e\n```\n\n### Forwarded events\n\nThe following events are forwarded to the [svelte-search](https://github.com/metonym/svelte-search) component.\n\n- on:type\n- on:input\n- on:change\n- on:focus\n- on:clear\n- on:blur\n- on:keydown\n\n## Changelog\n\n[Changelog](CHANGELOG.md)\n\n## License\n\n[MIT](LICENSE)\n\n[npm]: https://img.shields.io/npm/v/svelte-typeahead.svg?color=%23ff3e00\u0026style=for-the-badge\n[npm-url]: https://npmjs.com/package/svelte-typeahead\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetonym%2Fsvelte-typeahead","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmetonym%2Fsvelte-typeahead","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetonym%2Fsvelte-typeahead/lists"}