Options
All
  • Public
  • Public/Protected
  • All
Menu

Module @react-md/autocomplete

Index

Type aliases

AutoCompleteData

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

AutoCompleteFilterFunction<O>: PreconfiguredFilterFunction | FilterFunction<O>

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

Type parameters

  • O: {} = {}

AutoCompleteHandler

AutoCompleteHandler: (result: AutoCompleteResult) => void

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

Type declaration

AutoCompletion

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

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

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.

Type parameters

  • O: {} = {}

Type declaration

FilterFunctionOptions

FilterFunctionOptions<O>: O & CaseInsensitiveOptions<AutoCompleteData>

The filter options provided to the filter function.

Type parameters

  • O: {} = {}

OptionalAutoCompleteProps

OptionalAutoCompleteProps: Pick<AutoCompleteProps, "onAutoComplete" | "disableShowOnFocus">

PreconfiguredFilterFunction

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

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

Variables

Const AutoComplete

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

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

Functions

DEFAULT_GET_RESULT_ID

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

    Parameters

    • 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

  • 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.

    Parameters

    • 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

    Returns ReactNode

    a renderable node to display

DEFAULT_GET_RESULT_VALUE

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

    Parameters

    • 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.

HighlightedResult

isResultOf

  • 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.

    Example:

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

    Type parameters

    • T: {}

    Parameters

    Returns datum is T

useAutoComplete

Generated using TypeDoc