prosekit/web/autocomplete

<prosekit-autocomplete-root>
  <prosekit-autocomplete-positioner>
    <prosekit-autocomplete-popup>
      <prosekit-autocomplete-item>...</prosekit-autocomplete-item>
      <prosekit-autocomplete-empty>...</prosekit-autocomplete-empty>
    </prosekit-autocomplete-popup>
  </prosekit-autocomplete-positioner>
</prosekit-autocomplete-root>

new SelectEvent(): SelectEvent

new ValueChangeEvent(value: string): ValueChangeEvent

readonly detail: string

The newly selected value.

new ValuesChangeEvent(values: string[]): ValuesChangeEvent

readonly detail: string[]

The newly selected values.

new OpenChangeEvent(open: boolean): OpenChangeEvent

readonly detail: boolean

Whether the overlay is open.

<prosekit-autocomplete-empty> custom element.

Properties: AutocompleteEmptyProps

new AutocompleteEmptyElement(): AutocompleteEmptyElement

addController(controller: ReactiveController): void

removeController(controller: ReactiveController): void

connectedCallback(): void

disconnectedCallback(): void

<prosekit-autocomplete-item> custom element.

Properties: AutocompleteItemProps

Events: AutocompleteItemEvents

Data attributes:

new AutocompleteItemElement(): AutocompleteItemElement

disabled: boolean

Whether this option is disabled.

Default

Section titled “Default”

false

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

Section titled “Default”

""

addController(controller: ReactiveController): void

removeController(controller: ReactiveController): void

connectedCallback(): void

disconnectedCallback(): void

<prosekit-autocomplete-popup> custom element.

Properties: AutocompletePopupProps

Events: AutocompletePopupEvents

Data attributes:

new AutocompletePopupElement(): AutocompletePopupElement

addController(controller: ReactiveController): void

removeController(controller: ReactiveController): void

connectedCallback(): void

disconnectedCallback(): void

<prosekit-autocomplete-positioner> custom element.

Properties: AutocompletePositionerProps

Data attributes:

CSS variables:

new AutocompletePositionerElement(): AutocompletePositionerElement

strategy: "fixed" | "absolute"

The strategy to use for positioning

Default

Section titled “Default”

"absolute"

autoUpdate: boolean | AutoUpdateOptions

Options to activate auto-update listeners

See

Section titled “See”

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

Default

Section titled “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

Section titled “Default”

true

shift: boolean

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

Default

Section titled “Default”

true

overlap: boolean

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

Default

Section titled “Default”

false

sameWidth: boolean

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

Default

Section titled “Default”

false

sameHeight: boolean

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

Default

Section titled “Default”

false

hide: boolean

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

Default

Section titled “Default”

false

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

Section titled “Default”

'viewport'

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

Section titled “Default”

'floating'

altBoundary: boolean

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

Default

Section titled “Default”

false

placement: Placement

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

Default

Section titled “Default”

"bottom-start"

offset: OffsetOptions

The distance between the popover and the hovered block.

Default

Section titled “Default”

4

inline: boolean

Default

Section titled “Default”

true

hoist: boolean

Default

Section titled “Default”

true

fitViewport: boolean

Default

Section titled “Default”

true

boundary: Boundary

Default

Section titled “Default”

"The body element"

overflowPadding: number

Default

Section titled “Default”

8

addController(controller: ReactiveController): void

removeController(controller: ReactiveController): void

connectedCallback(): void

disconnectedCallback(): void

new QueryChangeEvent(query: string): QueryChangeEvent

readonly detail: string

The current query string.

<prosekit-autocomplete-root> custom element.

Properties: AutocompleteRootProps

Events: AutocompleteRootEvents

new AutocompleteRootElement(): AutocompleteRootElement

regex: RegExp | null

The regular expression to match the query text to autocomplete.

Default

Section titled “Default”

null

filter: ItemFilter | null

The filter function to determine if an item should be shown in the listbox.

Default

Section titled “Default”

defaultItemFilter

addController(controller: ReactiveController): void

removeController(controller: ReactiveController): void

connectedCallback(): void

disconnectedCallback(): void

disabled: boolean

Whether this option is disabled.

Default

Section titled “Default”

false

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

Section titled “Default”

""

select: SelectEvent

Emitted when the the item is selected.

valueChange: ValueChangeEvent

Emitted when the selected value changes. Only available when multiple is false.

valuesChange: ValuesChangeEvent

Emitted when the selected values change. Only available when multiple is true.

strategy: "fixed" | "absolute"

The strategy to use for positioning

Default

Section titled “Default”

"absolute"

autoUpdate: boolean | AutoUpdateOptions

Options to activate auto-update listeners

See

Section titled “See”

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

Default

Section titled “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

Section titled “Default”

true

shift: boolean

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

Default

Section titled “Default”

true

overlap: boolean

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

Default

Section titled “Default”

false

sameWidth: boolean

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

Default

Section titled “Default”

false

sameHeight: boolean

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

Default

Section titled “Default”

false

hide: boolean

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

Default

Section titled “Default”

false

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

Section titled “Default”

'viewport'

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

Section titled “Default”

'floating'

altBoundary: boolean

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

Default

Section titled “Default”

false

placement: Placement

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

Default

Section titled “Default”

"bottom-start"

offset: OffsetOptions

The distance between the popover and the hovered block.

Default

Section titled “Default”

4

inline: boolean

Default

Section titled “Default”

true

hoist: boolean

Default

Section titled “Default”

true

fitViewport: boolean

Default

Section titled “Default”

true

boundary: Boundary

Default

Section titled “Default”

"The body element"

overflowPadding: number

Default

Section titled “Default”

8

regex: RegExp | null

The regular expression to match the query text to autocomplete.

Default

Section titled “Default”

null

filter: ItemFilter | null

The filter function to determine if an item should be shown in the listbox.

Default

Section titled “Default”

defaultItemFilter

valueChange: ValueChangeEvent

Emitted when the selected value changes. Only available when multiple is false.

valuesChange: ValuesChangeEvent

Emitted when the selected values change. Only available when multiple is true.

openChange: OpenChangeEvent

Fired when the open state changes.

queryChange: QueryChangeEvent

Fired when the query changes.