AutoComplete

Provide auto-complete functionality for input box.

Import

MainIndividual
import { AutoComplete } from 'rsuite';

Examples

Basic

Autocomplete suffix

Size

Custom Render Item

Disabled and read only

Combined with InputGroup

Controlled

Accessibility

ARIA properties

  • Autocomplete has role combobox.
  • Has the aria-haspopup="listbox" attribute to indicate that the input has a popup listbox.
  • Has the aria-expanded attribute to indicate whether the listbox is open or not.
  • Has the aria-controls attribute to indicate the ID of the listbox element.
  • Has the aria-activedescendant attribute to indicate the ID of the focused option.

Keyboard interactions

  • Down - Move focus to the next option.
  • Up - Move focus to the previous option.
  • Enter - Select the focused option.
  • Esc - Close the listbox.

Props

<AutoComplete>

Property Type(Default) Description
classPrefix string ('auto-complete') The prefix of the component CSS class
data * ItemDataType[] | string[] The data of component
defaultValue string Default value
disabled boolean Whether disabled select
filterBy (value: string, item: ItemDataType) => boolean Custom filter rules (will only display items that value is a substring of which by default)
menuClassName string A css class to apply to the Menu DOM
onChange (value:string, event) => void Called when select an option or input value change, or value of input is changed
onClose () => void Callback fired when hidden
onEnter () => void Callback fired before the overlay transitions in
onEntered () => void Callback fired after the overlay finishes transitioning in
onEntering () => void Callback fired as the overlay begins to transition in
onExit () => void Callback fired right before the overlay transitions out
onExited () => void Callback fired after the overlay finishes transitioning out
onExiting () => void Callback fired as the overlay begins to transition out
onSelect (item: ItemDataType, event) => void Called when a option is selected.
placeholder ReactNode The placeholder of input
renderMenu (menu:ReactNode) => ReactNode Customizing the Rendering Menu list
renderMenuItem (label:ReactNode, item: ItemDataType) => ReactNode Custom render menu items
selectOnEnter boolean (true) When set to false, the Enter key selection function is invalid
size 'lg' | 'md' | 'sm' | 'xs' A component can have different sizes
value string Value (Controlled)

ts:ItemDataType 

interface ItemDataType {
  /** The value of the option corresponds to the `valueKey` in the data. **/
  value: string;

  /** The content displayed by the option corresponds to the `labelKey` in the data. **/
  label: ReactNode;

  /**
   * The data of the child option corresponds to the `childrenKey` in the data.
   * Properties owned by tree structure components, such as TreePicker, Cascader.
   */
  children?: ItemDataType[];

  /**
   * Properties of grouping functional components, such as CheckPicker, InputPicker
   */
  groupBy?: string;

  /**
   * The children under the current node are loading.
   * Used for components that have cascading relationships and lazy loading of children. E.g. Cascader, MultiCascader
   */
  loading?: boolean;
}
Vercel banner