Autocomplete
Autocomplete provides options to configure how the filter search behaves
Last updated
Autocomplete provides options to configure how the filter search behaves
Last updated
| Properties | Type | Descriptions | Required | Default |
|---|---|---|---|---|
filterOptions and matchSorter can't be used together; if you include both, the Loop will not build.
| Properties | Descriptions | Required | Default |
|---|---|---|---|
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 />);
| Properties | Descriptions | Required | Default |
|---|---|---|---|