The Autocomplete
component is useful for presenting real-time suggestions, completions,
or filtering.
Prop type | Description | |
---|---|---|
linkanchor |
| This is how the menu's @see Layover#anchor |
linkautoComplete |
| default: This prop is used for disabling the browser's default autocomplete suggestions
of previously typed values in the text field. By default, this is set to |
linkautocompleteWithLabel |
| default: Boolean if the @see onAutocomplete |
linkbelowAnchor |
| This is the anchor to use when the @see Layover#belowAnchor |
linkblock |
| Boolean if this text field should be styled as a full width text field. Floating labels and the text field indicator will be removed automatically. |
linkcentered |
| @see Layover#centered |
linkclassName |
| An optional className to apply to the menu that contains the autocomplete. |
linkclearOnAutocomplete |
| A boolean if the text field's value should be reset to the empty string when
an item is auto-completed. This is useful if you do not want a fully controlled
component and the values are stored outside of the |
linkcloseOnOutsideClick |
| |
linkdata |
| The data that will be used for autocomplete suggestions. This can either be
an array of string, number, or object. If it is an array of objects, the key
|
linkdataLabel |
| default: An object key to use to extract the text to be compared for filtering.
This will only be applied if the given |
linkdataValue |
| An optional object key to use to extract the
|
linkdefaultValue |
| default: The default value for the autocomplete's text field. |
linkdeleteKeys |
| A single key or an array of keys to delete from your data object before passing
to the |
linkdisabled |
| Boolean if the autocomplete is disabled. |
linkfillViewportHeight |
| |
linkfillViewportWidth |
| |
linkfilter |
| default: An optional function to use to filter the |
linkfindInlineSuggestion |
| default: The function to call to find a suggestion for an inline autocomplete. This function expects to return a single result of a number or a string.
|
linkfixedTo |
| This is how the menu's list will be "fixed" to the @see Layover#fixedTo |
linkfocusInputOnAutocomplete |
| Boolean if the This is really only added for keyboard support and the fact that each of suggestions are focusable. |
linkfullWidth |
| default: Boolean if the autocomplete should span the entire width. |
linkid |
| An id to give the autocomplete. Either this or the @see menuId |
linkinline |
| Boolean if the |
linkinlineSuggestionClassName |
| An optional className to apply to the inline suggestion when using |
linkinlineSuggestionPadding |
| default: The amount of padding to use between the current text and the inline suggestion text. |
linkinlineSuggestionStyle |
| An optional style to apply to the inline suggestion when using |
linkinputClassName |
| An optional className to apply to the autocomplete's input field itself. |
linkinputStyle |
| An optional style to apply to the autocomplete's text field input itself. |
linklabel |
| A label to display with the autocomplete. |
linklistClassName |
| The optional className to apply to the opened menu List if the
|
linklistHeightRestricted |
| Boolean if the list should have its height restricted to the |
linklistId |
| An optional id to provide to the menu's list. @see Menu#listId |
linklistInline |
| Boolean if the menu's list should appear horizontally instead of vertically. |
linklistStyle |
| The optional style to apply to the opened menu List if the
|
linklistZDepth |
| The list's z-depth for applying box shadow. This should be a number from 0 to 5. |
linkmenuId |
| The menu id to provide to the autocomplete. Either this prop or the |
linkminBottom |
| @see Layover#minBottom |
linkminLeft |
| @see Layover#minLeft |
linkminRight |
| @see Layover#minRight |
linkoffset |
| default: An optional number representing the data's offset if the results were paginated.
This is used for accessibility with the @see total |
linkonAutocomplete |
| An optional function to call when an autocomplete suggestion is clicked either
by using the mouse, the enter/space key, or touch. The match index and current
|
linkonBlur |
| An optional function to call when the entire |
linkonChange |
| An optional function to call when the
|
linkonFocus |
| An optional function to call when the |
linkonKeyDown |
| An optional function to call when the |
linkonMenuClose |
| An optional function to call when the |
linkonMenuOpen |
| An optional function to call when the |
linkonMouseDown |
| An optional function to call when the |
linkposition |
| default: This is the animation position for the list that appears. |
linkrepositionOnResize |
| default: Boolean if the menu should automatically try to reposition itself to stay within the viewport when the window resizes. |
linkrepositionOnScroll |
| default: Boolean if the menu should automatically try to reposition itself to stay within
the viewport when the |
linksameWidth |
| default: @see Layover#sameWidth |
linkshowUnfilteredData |
| default: Boolean if the list of data should be shown on focus when no filter value has been provided. |
linksimplifiedMenu |
| Boolean if the menu logic should be simplified without any viewport logic and position based on the relative position of the menu. This will most like require some additional styles applied to the menu. @see Layover#simplified |
linkstyle |
| An optional style to apply to the menu that contains the autocomplete. |
linktextFieldClassName |
| An optional className to apply to the autocomplete's text field. |
linktextFieldStyle |
| An optional style to apply to the autocomplete's text field. |
linktoolbar |
| @see TextFields#toolbar |
linktotal |
| An optional number representing the total number of results in the @see offset |
linktransitionEnterTimeout |
| |
linktransitionLeaveTimeout |
| |
linktransitionName |
| An optional transition name to use for the list appearing/disappearing. |
linkvalue |
| An optional value to use for the text field. This will force this component
to be controlled and require the |
linkxThreshold |
| @see Layover#xThreshold |
linkyThreshold |
| @see Layover#yThreshold |
Enums
linkHorizontalAnchors
An enum for all the different types of horizontal anchors on a layover.
Name | Value | Description |
---|---|---|
LEFT | 'left' | Positions the layover to the outside left on the toggle component so that it does not overlap. |
INNER_LEFT | 'inner left' | Positions the layover to the inner left of the toggle component so that it will overlap. |
CENTER | 'center' | Positions the layover so that it overlaps the toggle component by positioning itself in the cetner of the toggle component's width. |
RIGHT | 'right' | Positions the layover to the outside right on the toggle component so that it does not overlap. |
INNER_RIGHT | 'inner right' | Positions the layover to the outside right on the toggle component so that it will overlap. |
linkVerticalAnchors
An enum for all the different types of horizontal anchors on a layover.
Name | Value | Description |
---|---|---|
TOP | 'top' | Positions the layover to be placed over the toggle component so that it will never overlay the toggle component. |
CENTER | 'center' | Positions the layover so that it will be centered over the toggle component based on the layover's height. |
OVERLAP | 'overlap' | Positions the layover so that it will overlap the toggle component by fixing to the top of the toggle. |
BOTTOM | 'bottom' | Positions the layover to be placed below the toggle component so that it will never overlay the toggle component. |
linkPositions
An enum for all the animation positions for a layover appearing.
Name | Value | Description |
---|---|---|
TOP_LEFT | 'tl' | The layover will appear by transitioning from the top left and expand down right. |
TOP_RIGHT | 'tr' | The layover will appear by transitioning from the top right and expand down left. |
BOTTOM_LEFT | 'bl' | The layover will appear by transitioning from the bottom left and expand top right. |
BOTTOM_RIGHT | 'br' | The layover will appear by transitioning from the bottom right and expand top left. |
BELOW | 'below' | The layover will appear by just transitioning downwards from the bottom of the toggle component. |
Getters
value(): String
value(): String