Autocompletes

The Autocomplete component is useful for presenting real-time suggestions, completions, or filtering.

arrow_upwardProp name
Prop typeDescription

Enums

An enum for all the different types of horizontal anchors on a layover.

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

An enum for all the different types of horizontal anchors on a layover.

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

An enum for all the animation positions for a layover appearing.

NameValueDescription
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
Js

Gets the current value from the text field. This is used when you have an uncontrolled text field and simply need the value from a ref callback.

Class Functions

fuzzyFilter(haystack, needle, dataLabel): Array.<(string|number|Object|function())>
Js

This function does a simple fuzzy search of some needle for every item in a haystack. It will only include items that are:

  • not null or undefined
  • valid React Components
  • a number or string that contains each letter/number in order ignoring case
  • an object's dataLabel value that contains each letter/number in order ignoring case.

Example:

const haystack = ['Apple', 'Banana', 'Orange'];
fuzzyFilter(haystack, 'An') // ['Banana', 'Orange'];
fuzzyFilter(haystack, 'ae') // ['Apple']
Js
NameTypeDescription
haystack
Array.<(string|number|Object|function())> *

the haystack to search

needle
string *

the filter text to use.

dataLabelstring

the data label to use if the element is an object.

caseInsensitiveFilter(haystack, filterText, dataLabel): Array.<(string|number|Object|function())>
Js

This function does a simple ignore case search of some filterText for every item in a haystack. It will only include items that are:

  • not null or undefined
  • valid React Components
  • a number or string that contains each letter/number in exact order ignoring case
  • an object's dataLabel value that contains each letter/number in exact order ignoring case.

Example:

const haystack = ['Apple', 'Banana', 'Orange'];
caseInsensitiveFilter(haystack, 'An') // ['Banana', 'Orange'];
caseInsensitiveFilter(haystack, 'ae') // []
Js
NameTypeDescription
haystack
Array.<(string|number|Object|function())> *

the haystack to search

filterText
string *

the filter text to use.

dataLabelstring

the data label to use if the element is an object.

findIgnoreCase(haystack, value, dataLabel): string
Js

This function finds the first item in a haystack that starts with every letter of the value in order. It will ignore:

  • null or undefined
  • valid React components
NameTypeDescription
haystack
Array.<(string|number|Object|function())> *

the haystack to search.

value
string *

the current value to use.

dataLabelstring

the object key to use to extract the comparing value.