• Public
  • Public/Protected
  • All

Module @react-md/autocomplete


Type aliases

AutoCompleteData: string | ListboxOptionProps

The supported data that can be filtered and autocompleted. When the data is an object, the searchable value and display label can be extracted with the provided getter functions and labelKey/valueKey props.

AutoCompleteFilterFunction<O>: PreconfiguredFilterFunction | FilterFunction<O>

Either a preconfigured/provided filter function of the autocomplete or a custom function to use.

Type parameters

  • O: {} = {}

AutoCompleteHandler: (result: AutoCompleteResult) => void

Type declaration

    • The function to call whenever the value is auto completed by:

      • clicking an item with the mouse or touch
      • keyboard focusing a result and pressing enter


      Returns void

AutoCompletion: "none" | "inline" | "list" | "both"

The supported autocompletion types.

  • "none" - The autocomplete will not filter any results and will just show a dropdown list of suggestions instead.
  • "inline" - The first match will appear inline as the user types by using a selection range to highlight the remaining match characters.
  • "list" - The autocomplete will filter the results and show a dropdown list of matches based on the current text field's value.
  • "both" - A combination of both the "inline" and "list" autocomplete behaviors

Note: "inline" versions still aren't actually supported...

FilterFunction<O>: (query: string, data: readonly AutoCompleteData[], options: FilterFunctionOptions<O>) => readonly AutoCompleteData[]

Type parameters

  • O: {} = {}

Type declaration

    • The autocomplete works with a filter function that takes in the current search query, the list of data, and search options to return a new filtered list. If the default fuzzy filter and case insensitive filters don't match your use cases, you can also provide your own function that matches this api instead.


      Returns readonly AutoCompleteData[]

FilterFunctionOptions<O>: O & CaseInsensitiveOptions<AutoCompleteData>

The filter options provided to the filter function.

Type parameters

  • O: {} = {}

OptionalAutoCompleteProps: Pick<AutoCompleteProps, "onAutoComplete" | "disableShowOnFocus">
PreconfiguredFilterFunction: "fuzzy" | "case-insensitive" | "none"

The autocomplete supports a fuzzy filter and a case insensitive filter function out of the box. If you don't want any filtering to happen because the filtering is done through an API call or somewhere else, you can use the "none" value instead.

RequiredAutoCompleteProps: Required<Pick<AutoCompleteProps, "data" | "filter" | "filterOptions" | "filterOnNoValue" | "valueKey" | "getResultId" | "getResultValue" | "clearOnAutoComplete">>


AutoComplete: ForwardRefExoticComponent<AutoCompleteProps & RefAttributes<HTMLInputElement>> = ...

An AutoComplete is an accessible combobox widget that allows for real-time suggestions as the user types.


  • DEFAULT_GET_RESULT_ID(id: string, index: number): string
  • Generates an id for each result in the autocomplete's listbox.


    • id: string

      The listbox's id

    • index: number

      The index of the result in the list

    Returns string

    an id string

  • DEFAULT_GET_RESULT_LABEL(datum: Readonly<AutoCompleteData>, labelKey: string, _query: string): ReactNode
  • Gets a renderable label for each result in the autocomplete's listbox. This will be applied as the children for the Option element.


    • datum: Readonly<AutoCompleteData>

      The current result datum to get a label for

    • labelKey: string

      The key to extract a label from if the datum is an object

    • _query: string

      The current search query. This is useful if you want to implement text "highlighting" (bold) of all the letters that match in the item.

    Returns ReactNode

    a renderable node to display

  • DEFAULT_GET_RESULT_VALUE(datum: Readonly<AutoCompleteData>, valueKey: string): string
  • Gets a value string from each result that can be searched.


    • datum: Readonly<AutoCompleteData>

      The current result datum that should have a string extracted

    • valueKey: string

      The key to use to extract a string value from if the datum is an object

    Returns string

    a searchable string.

  • This is an extremely simple type guard that is useful when using the onAutoComplete handler since I'm terrible at typescript types. This will ensure that if the result is an object, it will match the provided data type of your data list.


    interface Example {
    name: string;
    value: string;

    const [example, setExample] = useState<Example | null>(null);
    const onAutoComplete = useCallback<AuoCompleteHandler>((_name, example) => {
    if (isResultOf<Example>(example)) {
    }, [])

    Type parameters

    • T: {}


    Returns datum is T

Generated using TypeDoc