Accessible, fuzzy search typeahead component
MIT License
Features
showAllResultsOnFocus
prop to display all results when focusing an empty input (3fc92ef, #65)Fixes
clear
event should be null
(a080a5a, #69)ul
margin (b49b1e0, #68)Fixes
TItem.disabled
to results
propDocumentation
pnpm
installation commandid
fields from data
arrayFeatures
data
value<script lang="ts">
import Typeahead from "svelte-typeahead";
const data = [
{ id: 1, state: "North Carolina" },
{ id: 2, state: "North Dakota" },
{ id: 3, state: "South Carolina" },
{ id: 4, state: "South Dakota" },
];
</script>
<Typeahead
{data}
extract={(item) => {
return item.state; // type "string" is inferred
}}
/>
Published by metonym over 3 years ago
Breaking Changes
ul
element is rendered even without results to preserve the accessibility labelFixes
svelte-search
aria-activedescendant
item to svelte-search
Contributed by @Skovvart in #20
Published by metonym over 3 years ago
Fixes
id
to Search
to fix aria-labelledby
references (contributed by @Skovvart in #19 )Published by metonym over 3 years ago
Features
add limit
prop to limit number of results; default value is Infinity
<Typeahead limit={2} {data} {extract} />
Published by metonym over 3 years ago
Features
disable
, filter
props to disable and filter items from the result set (contributed by @Amerlander)Fixes
Published by metonym over 3 years ago
Features
add inputAfterSelect
prop to allow user to preserve or clear the input field after selecting a result; possible values are "update" | "clear" | "keep"
(default is "update"
)
add searched value to dispatched "select" event detail (e.detail.searched
)
<Typeahead
inputAfterSelect="clear"
on:select="{(e) => {
console.log(e.detail.searched);
}}"
/>
Published by metonym over 3 years ago
Features
include original
item and originalIndex
in dispatched "select" event
<Typeahead
on:select="{(e) => {
console.log(e.detail.original);
console.log(e.detail.originalIndex);
}}"
/>
Published by metonym almost 4 years ago
Breaking Changes
svelte-search
to version 1.0.0label
, placeholder
props from search-svelte
SvelteComponentTyped
interface in TypeScript definitionsPublished by metonym almost 4 years ago
Features
results
array containing fuzzy resultsfocusAfterSelect
to opt in to focusing input after selecting a resultBreaking changes
focusAfterSelect
is false
by default