Suggestion

A suggestion component for chat.

Import

import{ Suggestion }from"@ant-design/x";

Docs

When To Use

Basic usage. State management in controlled. Custom trigger.

Set block to display in a whole row. extra can be used to configure additional information.

可任意输入 / 与 # 多次获取建议

Dynamically display suggestions with multiple tags based on input.

Common props ref：Common props

Property	Description	Type	Default	Version
block	Take up the full width	boolean	false	-
children	Custom input box	({ onTrigger, onKeyDown }) => ReactElement	-	-
items	Suggestion list	SuggestionItem[] \| ((info: T) => SuggestionItem[])	-	-
open	Controlled open panel	boolean	-	-
rootClassName	Root element class name	string	-	-
onSelect	Callback when the suggestion item is selected	(value: string) => void	-	-
onOpenChange	Callback when the panel open state changes	(open: boolean) => void	-	-

type onTrigger<T> = (info: T | false) => void;

Suggestion accepts generics to customize the parameter type passed to items renderProps. When false is passed, the suggestion panel is closed.

Property	Description	Type	Default	Version
children	Child item for the suggestion item	SuggestionItem[]	-	-
extra	Extra content for the suggestion item	ReactNode	-	-
icon	Icon for the suggestion	ReactNode	-	-
label	Content to display for the suggestion	ReactNode	-	-
value	Value of the suggestion item	string	-	-