Either a preconfigured/provided filter function of the autocomplete or a custom function to use.
The function to call whenever the value is auto completed by:
The supported autocompletion types.
"inline" and "list" autocomplete
behaviorsNote: "inline" versions still aren't actually supported...
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.
The filter options provided to the filter function.
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.
An AutoComplete is an accessible combobox widget that allows for real-time suggestions as the user types.
Generates an id for each result in the autocomplete's listbox.
The listbox's id
The index of the result in the list
an id string
Gets a renderable label for each result in the autocomplete's listbox. This
will be applied as the children for the Option element.
The current result datum to get a label for
The key to extract a label from if the datum is an object
The current search query. This is useful if you want to implement text "highlighting" (bold) of all the letters that match in the item.
a renderable node to display
Gets a value string from each result that can be searched.
The current result datum that should have a string extracted
The key to use to extract a string value from if the datum is an object
a searchable string.
The HighlightedResult component can be used to bold specific letters
within the children if the children is a 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.
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);
}
}, [])
The result data to type guard against.
This hook handles all the autocomplete's "logic" and behavior.
Generated using TypeDoc
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/valueKeyprops.