(e = [...e, { event: \"select\", detail }])}\n on:clear={() => (e = [...e, { event: \"clear\" }])}\n/>\n\n{JSON.stringify(e, null, 2)}\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&style=for-the-badge\n[npm-url]: https://npmjs.com/package/svelte-typeahead\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"svelte-typeahead\",\n \"version\": \"5.0.2\",\n \"license\": \"MIT\",\n \"description\": \"Accessible, fuzzy search typeahead component\",\n \"author\": \"Eric Liu (https://github.com/metonym)\",\n \"type\": \"module\",\n \"svelte\": \"./src/index.js\",\n \"main\": \"./src/index.js\",\n \"types\": \"./src/index.d.ts\",\n \"exports\": {\n \"./*.svelte\": {\n \"types\": \"./src/*.svelte.d.ts\",\n \"import\": \"./src/*.svelte\"\n },\n \"./*.js\": {\n \"types\": \"./src/*.d.ts\",\n \"import\": \"./src/*.js\"\n },\n \".\": {\n \"types\": \"./src/index.d.ts\",\n \"import\": \"./src/index.js\",\n \"svelte\": \"./src/index.js\"\n }\n },\n \"scripts\": {\n \"dev\": \"rollup -cw\",\n \"test\": \"svelte-check --workspace tests\"\n },\n \"dependencies\": {\n \"fuzzy\": \"0.1.3\",\n \"svelte-search\": \"^2.1.2\"\n },\n \"devDependencies\": {\n \"@rollup/plugin-commonjs\": \"^21.1.0\",\n \"@types/bun\": \"^1.3.3\",\n \"culls\": \"^0.1.2\",\n \"svelte\": \"^3.59.1\",\n \"svelte-check\": \"^4.1.4\",\n \"svelte-readme\": \"^3.6.3\",\n \"typescript\": \"^5.9.3\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/metonym/svelte-typeahead.git\"\n },\n \"homepage\": \"https://github.com/metonym/svelte-typeahead\",\n \"bugs\": \"https://github.com/metonym/svelte-typeahead/issues\",\n \"keywords\": [\n \"svelte\",\n \"svelte component\",\n \"typeahead\",\n \"fuzzy\",\n \"highlight\",\n \"search\",\n \"filter\",\n \"WAI-ARIA\",\n \"accessibility\"\n ],\n \"files\": [\n \"src\"\n ]\n}\n"
},
{
"path": "rollup.config.ts",
"content": "import commonjs from \"@rollup/plugin-commonjs\";\nimport svelteReadme from \"svelte-readme\";\n\nexport default svelteReadme({\n plugins: [commonjs()],\n style: `\n .code-fence li + li { margin: 0; }\n .code-fence { min-height: 16rem; }\n .code-fence pre { margin-bottom: 0; margin-top: 12px; }\n `,\n});\n"
},
{
"path": "src/Typeahead.svelte",
"content": "\n\n {\n if (!hideDropdown && !comboboxRef?.contains(target)) {\n close();\n }\n }}\n/>\n\n 0}\n aria-expanded={showResults}\n id=\"{id}-typeahead\"\n>\n = 0 &&\n !hideDropdown &&\n results.length > 0\n ? `${id}-result-${selectedIndex}`\n : null}\n bind:value\n on:type\n on:input\n on:change\n on:focus\n on:focus={() => {\n open();\n if (showDropdownOnFocus || showAllResultsOnFocus) {\n showResults = true;\n isFocused = true;\n }\n }}\n on:clear\n on:clear={open}\n on:blur={(e) => {\n // Check if focus is moving to an element within the combobox\n const relatedTarget = e.relatedTarget;\n if (relatedTarget && comboboxRef?.contains(relatedTarget)) {\n return;\n }\n // Close immediately for keyboard navigation (Tab, Shift+Tab)\n close();\n }}\n on:keydown\n on:keydown={(e) => {\n if (results.length === 0) return;\n\n switch (e.key) {\n case \"Enter\":\n select();\n break;\n case \"ArrowDown\":\n e.preventDefault();\n change(1);\n break;\n case \"ArrowUp\":\n e.preventDefault();\n change(-1);\n break;\n case \"Escape\":\n e.preventDefault();\n value = \"\";\n searchRef?.focus();\n close();\n break;\n }\n }}\n />\n \n {#if showResults}\n {#each results as result, index}\n \n {\n if (result.disabled) return;\n e.preventDefault(); // Prevent input from losing focus\n selectedIndex = index;\n select();\n }}\n on:mouseenter={() => {\n if (result.disabled) return;\n selectedIndex = index;\n }}\n >\n \n {@html result.string}\n \n \n {/each}\n {/if}\n {#if $$slots[\"no-results\"] && !hideDropdown && value.length > 0 && results.length === 0}\n \n \n
\n {/if}\n \n\n\n\n"
},
{
"path": "src/Typeahead.svelte.d.ts",
"content": "import type { SvelteComponentTyped } from \"svelte\";\nimport type { SearchProps } from \"svelte-search/src/Search.svelte\";\n\nexport interface TypeaheadProps extends Omit {\n /**\n * @default \"typeahead-\" + Math.random().toString(36)\n */\n id?: string;\n\n /**\n * @default \"\"\n */\n value?: string;\n\n /**\n * @default []\n */\n data?: TItem[];\n\n /**\n * @default (item) => item\n */\n extract?: (item: TItem) => any;\n\n /**\n * @default (item) => false\n */\n disable?: (item: TItem) => boolean;\n\n /**\n * @default (item) => false\n */\n filter?: (item: TItem) => boolean;\n\n /**\n * Set to `false` to prevent the first result from being selected\n * @default true\n */\n autoselect?: boolean;\n\n /**\n * Set to `keep` to keep the search field unchanged after select, set to `clear` to auto-clear search field\n * @default \"update\"\n */\n inputAfterSelect?: \"update\" | \"clear\" | \"keep\";\n\n /**\n * @default []\n */\n results?: {\n original: TItem;\n index: number;\n score: number;\n string: string;\n disabled?: boolean;\n }[];\n\n /**\n * Set to `true` to re-focus the input after selecting a result\n * @default false\n */\n focusAfterSelect?: boolean;\n\n /**\n * Set to `true` to only show results when the input is focused\n * @default false\n */\n showDropdownOnFocus?: boolean;\n\n /**\n * Set to `true` for all results to be shown when an empty input is focused\n * @default false\n */\n showAllResultsOnFocus?: boolean;\n\n /**\n * Specify the maximum number of results to return\n * @default Infinity\n */\n limit?: number;\n}\n\nexport default class Typeahead<\n TItem = string | number | Record\n> extends SvelteComponentTyped<\n TypeaheadProps,\n {\n select: CustomEvent<{\n searched: string;\n selected: TItem;\n selectedIndex: number;\n original: TItem;\n originalIndex: number;\n }>;\n type: CustomEvent;\n clear: CustomEvent;\n input: WindowEventMap[\"input\"];\n change: WindowEventMap[\"change\"];\n focus: WindowEventMap[\"focus\"];\n blur: WindowEventMap[\"blur\"];\n keydown: WindowEventMap[\"keydown\"];\n },\n {\n default: {\n result: {\n original: TItem;\n index: number;\n score: number;\n string: string;\n };\n index: number;\n value: string;\n };\n \"no-results\": {\n value: string;\n };\n }\n> {}\n"
},
{
"path": "src/index.d.ts",
"content": "export { default } from \"./Typeahead.svelte\";\n"
},
{
"path": "src/index.js",
"content": "export { default } from \"./Typeahead.svelte\";\n"
},
{
"path": "tests/Typeahead.test.svelte",
"content": "\n\n {\n console.log(\"select\", e.detail);\n }}\n on:clear\n on:type={(e) => {\n console.log(e.detail);\n }}\n bind:results\n let:result\n let:index\n let:value={searchedValue}\n>\n {result.original}\n {@html result.string}\n {index}\n {result.score}\n {searchedValue}\n \n No results {value}\n \n\n\n\n"
},
{
"path": "tsconfig.json",
"content": "{\n \"compilerOptions\": {\n \"noEmit\": true,\n \"esModuleInterop\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"verbatimModuleSyntax\": true,\n \"isolatedModules\": true,\n \"target\": \"ESNext\",\n \"module\": \"ESNext\",\n \"moduleResolution\": \"node\",\n \"strict\": true,\n \"skipLibCheck\": true,\n \"paths\": {\n \"svelte-typeahead\": [\"./src\"],\n \"svelte-typeahead/*\": [\"./src/*\"]\n }\n },\n \"include\": [\"src\", \"tests\"]\n}\n"
}
]