Links

Autocomplete

Autocomplete provides options to configure how the filter search behaves

Props:

Properties
Type
Descriptions
Required
Default
disabled
boolean
disables input
false
filterOptions
AutocompleteFilterOptions *note this will set matchSorter to never
Options to configure how the filter search behaves *cannot be included with matchSorter
undefined
freeSolo
boolean
Option to allow custom user input that doesn't match any of the supplied selectable options
false
label
string
Label associated with component
undefined
loading
boolean
If true, displays component in 'loading' state
false
matchSorter
AutocompleteMatchSorterOptions *note this will set filterOptions to never
Options to use with our implementation of match-sorter *cannot be included with filterOptions
undefined
onChange
void
Callback handler triggered if typed input is received
undefined
onSelect
void
Callback handler triggered if drop down value is selected
undefined
options
AutocompleteOption[] Array of AutocompleteOption objects these object have the properties of label: string and value: string
List of selectable options
undefined
tooltip
string
Tooltip associated with component
undefined
validationError
string
Red message when input is invalid
undefined
value
string
Default selected value
undefined
filterOptions and matchSorter can't be used together; if you include both, the Loop will not build.

AutocompleteMatchSorterOptions

Properties
Descriptions
Required
Default
keepDiacritics
By default, match-sorter will strip diacritics before doing any comparisons. You can use this option to disable this behavior.
false
recipe
By default, match-sorter assumes spaces to be the word separator. However, you can use this option with the CaseTypes enum to choose a different casing style.
threshold
Thresholds can be used to specify the criteria used to rank the results. Available thresholds are in the MatchSorterRankings enum.

AutocompleteFilterOptions:

Properties
Descriptions
Required
Default
ignoreAccents
Defaults to true. Remove diacritics.
true
ignoreCase
Defaults to true. Ignores casing of searched text when comparing values.
true
limit
Default to null.
Limit the number of suggested options to be shown. For example, if config.limit is 100, only the first 100 matching options are shown.
It can be useful if a lot of options match and virtualization wasn't set up.
null
matchFrom
Controls the matching starting position
'any'
stringify
Controls how an option is converted into a string so that it can be matched against the input text fragment. Accepts an array of strings that is the path to the key in the AutocompleteOption to be used.
trim
Defaults to false. Remove trailing spaces.
false

Examples:

JavaScript
React
import { whisper } from '@oliveai/ldk';
import {
MatchSorterRankings,
WhisperComponentType,
} from '@oliveai/ldk/dist/whisper/types';
const options = [
{ label: 'Value 1', value: '1' },
{ label: 'Value 2', value: '2' },
{ label: 'Value 3', value: '3' },
{ label: 'Value 4', value: '4' },
];
const autocompleteWhisper = async () => {
await whisper.create({
label: 'Autocomplete Example',
onClose: () => {
console.debug('closed');
},
components: [
{
type: WhisperComponentType.Markdown,
body: '## Autocomplete',
},
{
type: WhisperComponentType.Autocomplete,
label: 'Autocomplete',
loading: false,
onChange: () => {
// do nothing
},
onSelect: () => {
// do nothing
},
options,
},
{
type: WhisperComponentType.Markdown,
body: '## Autocomplete Freesolo',
},
{
type: WhisperComponentType.Markdown,
body: 'the textbox can contain any arbitrary value.',
},
{
type: WhisperComponentType.Autocomplete,
label: 'Autocomplete Freesolo',
freeSolo: true,
loading: false,
multiple: true,
onSelect: () => {
// do nothing
},
options,
},
{
type: WhisperComponentType.Markdown,
body: '## Autocomplete FilterOptions',
},
{
type: WhisperComponentType.Markdown,
body: 'Use a custom filter to display the option on search.',
},
{
type: WhisperComponentType.Autocomplete,
label: 'Autocomplete filterOptions',
freeSolo: false,
loading: false,
multiple: true,
onSelect: () => {
// do nothing
},
filterOptions: {
ignoreAccents: true,
ignoreCase: true,
limit: 4,
matchFrom: 'any',
stringify: ['label', 'value'],
trim: false,
},
options,
},
{
type: WhisperComponentType.Markdown,
body: '## Autocomplete Freesolo FilterOptions',
},
{
type: WhisperComponentType.Markdown,
body: 'Use a custom freesolo filter to display the option on search.',
},
{
type: WhisperComponentType.Autocomplete,
label: 'Autocomplete freesolo filterOptions',
freeSolo: true,
loading: false,
multiple: true,
onSelect: () => {
// do nothing
},
filterOptions: {
ignoreAccents: true,
ignoreCase: true,
limit: 4,
matchFrom: 'any',
stringify: ['label', 'value'],
trim: true,
},
options,
},
{
type: WhisperComponentType.Markdown,
body: '## Autocomplete Multiple Marchsorter',
},
{
type: WhisperComponentType.Markdown,
body: 'Use a marchsorter to achieve fuzzy search.',
},
{
type: WhisperComponentType.Autocomplete,
label: 'Autocomplete Multiple matchSorter',
freeSolo: false,
loading: false,
multiple: true,
onSelect: () => {
// do nothing
},
matchSorter: {
keys: ['label'],
threshold: MatchSorterRankings.Matches,
},
options,
},
],
});
};
import { React, ReactWhisper } from '@oliveai/ldk';
import {MatchSorterRankings} from '@oliveai/ldk/dist/whisper/types';
const onEvent = (error: Error | undefined, value: string | string[]) => {
console.log(`React Test Loop: ${value}${error ? `, ${error}` : ''}`);
};
const options = [
{
label: 'Value1',
value: 'value1',
},
{
label: 'value2',
value: 'value2',
},
{
label: 'value3',
value: 'value3',
},
{
label: 'value4',
value: 'value4',
},
];
const AutocompleteTest: React.FunctionComponent<Object> = (props) => {
return (
<oh-whisper label="Autocomplete Example" onClose={() => console.debug('closed')}>
<oh-markdown body="## Autocomplete" />
<oh-autocomplete
freeSolo={false}
label="Autocomplete"
loading={false}
multiple={false}
onChange={(error, value) => onEvent(error, value)}
onSelect={(error, value) => onEvent(error, value)}
options={options}
tooltip="Autocomplete"
value=""
/>
<oh-markdown
body="## Autocomplete Freesolo"
/>
<oh-markdown
body="the textbox can contain any arbitrary value."
/>
<oh-autocomplete
freeSolo={true}
label="Autocomplete Freesolo"
loading={false}
multiple={true}
onChange={(error, value) => onEvent(error, value)}
onSelect={(error, value) => onEvent(error, value)}
options={options}
value=""
/>
<oh-markdown
body="## Autocomplete FilterOptions"
/>
<oh-markdown
body="Use a custom filter to display the option on search."
/>
<oh-autocomplete
filterOptions={{
ignoreAccents: true,
ignoreCase: true,
limit: 4,
matchFrom: 'any',
stringify: ['label', 'value'],
trim: false,
}}
freeSolo={false}
label="Autocomplete filterOptions"
loading={false}
multiple={true}
onChange={(error, value) => onEvent(error, value)}
onSelect={(error, value) => onEvent(error, value)}
options={options}
value=""
/>
<oh-markdown
body="## Autocomplete Freesolo FilterOptions"
/>
<oh-markdown
body="Use a custom freesolo filter to display the option on search."
/>
<oh-autocomplete
filterOptions={{
ignoreAccents: true,
ignoreCase: true,
limit: 4,
matchFrom: 'any',
stringify: ['label', 'value'],
trim: true,
}}
freeSolo={true}
label="Autocomplete freesolo filterOptions"
loading={false}
multiple={true}
onChange={(error, value) => onEvent(error, value)}
onSelect={(error, value) => onEvent(error, value)}
options={options}
value=""
/>
<oh-markdown
body="## Autocomplete Multiple Marchsorter"
/>
<oh-markdown
body="Use a marchsorter to achieve fuzzy search."
/>
<oh-autocomplete
freeSolo={false}
label="Autocomplete Multiple matchSorter"
loading={false}
matchSorter={{
keys: ['label'],
threshold: MatchSorterRankings.Matches,
}}
multiple={true}
onChange={(error, value) => onEvent(error, value)}
onSelect={(error, value) => onEvent(error, value)}
options={options}
value=""
/>
</oh-whisper>
);
};
ReactWhisper.renderNewWhisper(<AutocompleteTest />);