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>

<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>

<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="AutoComplete" onChange={setValue} onSelectionChange={setSelectedKey} value={value} > {(item) => <Item key={item.value}>{item.value}</Item>} </AutoComplete> ); } render(<Example />);

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="AutoComplete"
            onChange={setValue}
            onSelectionChange={setSelectedKey}
            value={value}
        >
            {(item) => <Item key={item.value}>{item.value}</Item>}
        </AutoComplete>
    );
}

render(<Example />);

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