prosekit/svelte/autocomplete

AutocompleteEmptyProps

Props for the AutocompleteEmpty component.

AutocompleteItemProps

Props for the AutocompleteItem component.

onSelect?: (event: CustomEvent<void>) => void

value?: string

The value of the item, which will be matched against the query.

If not provided, the value is the item's text content.

Default: ""

AutocompleteListProps

Props for the AutocompleteList component.

filter?: null | ItemFilter

The filter function to determine if an item should be shown in the listbox. By default, a simple case-insensitive substring match is used. You can provide a custom filter function to match against a more complex pattern. You can also pass null to disable filtering and allow all items to be shown.

Default: defaultItemFilter

onValueChange?: (event: string) => void

AutocompletePopoverProps

Props for the AutocompletePopover component.

altBoundary?: boolean

Whether to check the alternate elementContext’s boundary. Please see https://floating-ui.com/docs/detectoverflow#altboundary for more information.

Default: false

autoUpdate?: boolean | AutoUpdateOptions

Options to activate auto-update listeners

See

https://floating-ui.com/docs/autoUpdate

Default: true

boundary?: Boundary

Default: "The body element"

elementContext?: ElementContext

The element that will be used to check for overflow. Please see https://floating-ui.com/docs/detectoverflow#elementcontext for more information.

Default: 'floating'

fitViewport?: boolean

Default: true

flip?: boolean | Placement[]

Whether to flip the placement in order to keep it in view when the preferred placement(s) will overflow the clipping boundary. You can also provide an array of placements to try sequentially if the preferred placement does not fit.

Default: true

hide?: boolean

Whether to hide the floating element when the reference element or the floating element is fully clipped.

Default: false

hoist?: boolean

Default: true

inline?: boolean

Default: true

offset?: OffsetOptions

The distance between the popover and the hovered block.

Default: 4

onOpenChange?: (event: boolean) => void

onQueryChange?: (event: string) => void

overflowPadding?: number

Default: 8

overlap?: boolean

Whether the floating element can overlap the reference element to keep it in view.

Default: false

placement?: Placement

The placement of the popover, relative to the text cursor.

Default: "bottom-start"

regex?: null | RegExp

The regular expression to match the query text to autocomplete.

Default: null

rootBoundary?: RootBoundary

Describes the root boundary that the element will be checked for overflow relative to. Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.

Default: 'viewport'

sameHeight?: boolean

Whether to constrain the floating element's height so that it matches the reference element.

Default: false

sameWidth?: boolean

Whether to constrain the floating element's width so that it matches the reference element.

Default: false

shift?: boolean

Whether the floating element should shift to keep it in view.

Default: true

strategy?: "fixed" | "absolute"

The strategy to use for positioning

Default: "absolute"

transform?: boolean

Whether to use CSS transforms to position the floating element instead of layout (top and left CSS properties). CSS transforms are more performant, but can cause conflicts with transform animations.

Default: false

AutocompleteEmpty

Type: typeof SvelteComponent

AutocompleteItem

Type: typeof SvelteComponent

AutocompleteList

Type: typeof SvelteComponent

AutocompletePopover

Type: typeof SvelteComponent