Skip to main content

AutoComplete

The AutoComplete component provides a text input with a list of options that can be selected. By default, the results are filtered based on the text entered into the input and display as the user enters text.

Result
Loading...
Live Editor
<AutoComplete label="AutoComplete">
	<Item key="one">One</Item>
	<Item key="two">Two</Item>
	<Item key="three">Three</Item>
	<Item key="four">Four</Item>
</AutoComplete>

With sections​

Result
Loading...
Live Editor
<AutoComplete label="AutoComplete with Sections">
	<Section key="header-1" title="Fruit">
		<Item key="apples">Apples</Item>
		<Item key="bananas">Bananas</Item>
		<Item key="oranges">Oranges</Item>
	</Section>
	<Section key="header-2" title="Vegetables">
		<Item key="beans">Beans</Item>
		<Item key="cabbages">Cabbages</Item>
		<Item key="onions">Onions</Item>
	</Section>
	<Section key="header-3" title="Cheese">
		<Item key="cheddar">Cheddar</Item>
		<Item key="mozzarella">Mozzarella</Item>
		<Item key="swiss">Swiss</Item>
	</Section>
</AutoComplete>

Controlled component​

Result
Loading...
Live Editor
const items = [{ value: 'One' }, { value: 'Two' }, { value: 'Three' }, { value: 'Four' }];

function Example() {
	const [value, setValue] = useState('Two');
	const [selectedKey, setSelectedKey] = useState('Two');

	return (
		<AutoComplete
			defaultItems={items}
			label="Controlled"
			onChange={setValue}
			onSelectionChange={setSelectedKey}
			value={value}
		>
			{(item) => <Item key={item.value}>{item.value}</Item>}
		</AutoComplete>
	);
}

render(<Example />);

Within a Form​

Result
Loading...
Live Editor
<div data-testid="within-form">
	<Form
		initialValues={{}}
		onSubmit={async (values, { setSubmitting }) => {
			console.log(values);
			setSubmitting(false);
		}}
		validationSchema={object().shape({ autocomplete: string().required() })}
	>
		<FormField>
			<AutoComplete label="AutoComplete within a Form" name="autocomplete">
				<Item key="one">One</Item>
				<Item key="two">Two</Item>
				<Item key="three">Three</Item>
				<Item key="four">Four</Item>
			</AutoComplete>
		</FormField>
	</Form>
</div>

Disabling Filtering​

In some cases you may want to disable the default filtering behavior of the AutoComplete component, such as when the options are already filtered on the backend or when you want to show all options at all times. You can do this by setting the enableFilter prop to false.

Result
Loading...
Live Editor
<AutoComplete menuTrigger="focus" label="AutoComplete with filtering disabled" enableFilter={false}>
	<Section key="header-1" title="Fruit">
		<Item key="apples">Apples</Item>
		<Item key="bananas">Bananas</Item>
		<Item key="oranges">Oranges</Item>
	</Section>
	<Section key="header-2" title="Vegetables">
		<Item key="beans">Beans</Item>
		<Item key="cabbages">Cabbages</Item>
		<Item key="onions">Onions</Item>
	</Section>
	<Section key="header-3" title="Cheese">
		<Item key="cheddar">Cheddar</Item>
		<Item key="mozzarella">Mozzarella</Item>
		<Item key="swiss">Swiss</Item>
	</Section>
</AutoComplete>

Analytics​

The AutoComplete component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'AutoComplete',
	actions: {
		onChange: { type: 'AUTOCOMPLETE_CHANGE', payload: 'Change' },
		onSelectionChange: { type: 'AUTOCOMPLETE_SELECTION_CHANGE', payload: 'Change' },
	},
};

Props​