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

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,
        },
      ],
    });
};      

React

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 />);