Autocomplete
Autocomplete provides options to configure how the filter search behaves
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.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. | |
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 |
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 />);
Last modified 11mo ago