Autocomplete
Autocomplete provides options to configure how the filter search behaves

Props:

Properties
Descriptions
Required
Default
filterOptions
Options to configure how the filter search behaves
freeSolo
Option to allow custom user input that doesn't match any of the supplied selectable options
false
label
Label associated with component
loading
If true, displays component in 'loading' state
matchSorter
Options to use with our implementation of match-sorter
onChange
Callback handler triggered if typed input is received
onSelect
Callback handler triggered if drop down value is selected
options
List of selectable options
tooltip
Tooltip associated with component
value
Default selected value
filterOptions and matchSorter can't be used together; if you include both, matchSorter will take precedence

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
1
import { whisper } from '@oliveai/ldk';
2
import {
3
MatchSorterRankings,
4
WhisperComponentType,
5
} from '@oliveai/ldk/dist/whisper/types';
6
7
const options = [
8
{ label: 'Value 1', value: '1' },
9
{ label: 'Value 2', value: '2' },
10
{ label: 'Value 3', value: '3' },
11
{ label: 'Value 4', value: '4' },
12
];
13
14
const autocompleteWhisper = async () => {
15
await whisper.create({
16
label: 'Autocomplete Example',
17
onClose: () => {
18
console.debug('closed');
19
},
20
components: [
21
{
22
type: WhisperComponentType.Markdown,
23
body: '## Autocomplete',
24
},
25
{
26
type: WhisperComponentType.Autocomplete,
27
label: 'Autocomplete',
28
loading: false,
29
onChange: () => {
30
// do nothing
31
},
32
onSelect: () => {
33
// do nothing
34
},
35
options,
36
},
37
{
38
type: WhisperComponentType.Markdown,
39
body: '## Autocomplete Freesolo',
40
},
41
{
42
type: WhisperComponentType.Markdown,
43
body: 'the textbox can contain any arbitrary value.',
44
},
45
{
46
type: WhisperComponentType.Autocomplete,
47
label: 'Autocomplete Freesolo',
48
freeSolo: true,
49
loading: false,
50
multiple: true,
51
onSelect: () => {
52
// do nothing
53
},
54
options,
55
},
56
{
57
type: WhisperComponentType.Markdown,
58
body: '## Autocomplete FilterOptions',
59
},
60
{
61
type: WhisperComponentType.Markdown,
62
body: 'Use a custom filter to display the option on search.',
63
},
64
{
65
type: WhisperComponentType.Autocomplete,
66
label: 'Autocomplete filterOptions',
67
freeSolo: false,
68
loading: false,
69
multiple: true,
70
onSelect: () => {
71
// do nothing
72
},
73
filterOptions: {
74
ignoreAccents: true,
75
ignoreCase: true,
76
limit: 4,
77
matchFrom: 'any',
78
stringify: ['label', 'value'],
79
trim: false,
80
},
81
options,
82
},
83
{
84
type: WhisperComponentType.Markdown,
85
body: '## Autocomplete Freesolo FilterOptions',
86
},
87
{
88
type: WhisperComponentType.Markdown,
89
body: 'Use a custom freesolo filter to display the option on search.',
90
},
91
{
92
type: WhisperComponentType.Autocomplete,
93
label: 'Autocomplete freesolo filterOptions',
94
freeSolo: true,
95
loading: false,
96
multiple: true,
97
onSelect: () => {
98
// do nothing
99
},
100
filterOptions: {
101
ignoreAccents: true,
102
ignoreCase: true,
103
limit: 4,
104
matchFrom: 'any',
105
stringify: ['label', 'value'],
106
trim: true,
107
},
108
options,
109
},
110
{
111
type: WhisperComponentType.Markdown,
112
body: '## Autocomplete Multiple Marchsorter',
113
},
114
{
115
type: WhisperComponentType.Markdown,
116
body: 'Use a marchsorter to achieve fuzzy search.',
117
},
118
{
119
type: WhisperComponentType.Autocomplete,
120
label: 'Autocomplete Multiple matchSorter',
121
freeSolo: false,
122
loading: false,
123
multiple: true,
124
onSelect: () => {
125
// do nothing
126
},
127
matchSorter: {
128
keys: ['label'],
129
threshold: MatchSorterRankings.Matches,
130
},
131
options,
132
},
133
],
134
});
135
};
Copied!
1
import { React, ReactWhisper } from '@oliveai/ldk';
2
import {MatchSorterRankings} from '@oliveai/ldk/dist/whisper/types';
3
4
const onEvent = (error: Error | undefined, value: string | string[]) => {
5
console.log(`React Test Loop: ${value}${error ? `, ${error}` : ''}`);
6
};
7
const options = [
8
{
9
label: 'Value1',
10
value: 'value1',
11
},
12
{
13
label: 'value2',
14
value: 'value2',
15
},
16
{
17
label: 'value3',
18
value: 'value3',
19
},
20
{
21
label: 'value4',
22
value: 'value4',
23
},
24
];
25
26
const AutocompleteTest: React.FunctionComponent<Object> = (props) => {
27
return (
28
<oh-whisper label="Autocomplete Example" onClose={() => console.debug('closed')}>
29
<oh-markdown body="## Autocomplete" />
30
<oh-autocomplete
31
freeSolo={false}
32
label="Autocomplete"
33
loading={false}
34
multiple={false}
35
onChange={(error, value) => onEvent(error, value)}
36
onSelect={(error, value) => onEvent(error, value)}
37
options={options}
38
tooltip="Autocomplete"
39
value=""
40
/>
41
<oh-markdown
42
body="## Autocomplete Freesolo"
43
/>
44
<oh-markdown
45
body="the textbox can contain any arbitrary value."
46
/>
47
<oh-autocomplete
48
freeSolo={true}
49
label="Autocomplete Freesolo"
50
loading={false}
51
multiple={true}
52
onChange={(error, value) => onEvent(error, value)}
53
onSelect={(error, value) => onEvent(error, value)}
54
options={options}
55
value=""
56
/>
57
<oh-markdown
58
body="## Autocomplete FilterOptions"
59
/>
60
<oh-markdown
61
body="Use a custom filter to display the option on search."
62
/>
63
<oh-autocomplete
64
filterOptions={{
65
ignoreAccents: true,
66
ignoreCase: true,
67
limit: 4,
68
matchFrom: 'any',
69
stringify: ['label', 'value'],
70
trim: false,
71
}}
72
freeSolo={false}
73
label="Autocomplete filterOptions"
74
loading={false}
75
multiple={true}
76
onChange={(error, value) => onEvent(error, value)}
77
onSelect={(error, value) => onEvent(error, value)}
78
options={options}
79
value=""
80
/>
81
<oh-markdown
82
body="## Autocomplete Freesolo FilterOptions"
83
/>
84
<oh-markdown
85
body="Use a custom freesolo filter to display the option on search."
86
/>
87
<oh-autocomplete
88
filterOptions={{
89
ignoreAccents: true,
90
ignoreCase: true,
91
limit: 4,
92
matchFrom: 'any',
93
stringify: ['label', 'value'],
94
trim: true,
95
}}
96
freeSolo={true}
97
label="Autocomplete freesolo filterOptions"
98
loading={false}
99
multiple={true}
100
onChange={(error, value) => onEvent(error, value)}
101
onSelect={(error, value) => onEvent(error, value)}
102
options={options}
103
value=""
104
/>
105
<oh-markdown
106
body="## Autocomplete Multiple Marchsorter"
107
/>
108
<oh-markdown
109
body="Use a marchsorter to achieve fuzzy search."
110
/>
111
<oh-autocomplete
112
freeSolo={false}
113
label="Autocomplete Multiple matchSorter"
114
loading={false}
115
matchSorter={{
116
keys: ['label'],
117
threshold: MatchSorterRankings.Matches,
118
}}
119
multiple={true}
120
onChange={(error, value) => onEvent(error, value)}
121
onSelect={(error, value) => onEvent(error, value)}
122
options={options}
123
value=""
124
/>
125
</oh-whisper>
126
);
127
};
128
129
ReactWhisper.renderNewWhisper(<AutocompleteTest />);
130
Copied!
Copy link