npm i --save @choc-ui/autocomplete
#or
yarn add @choc-ui/autocomplete
Demo on Codesandbox
import {
AutoComplete,
AutoCompleteInput,
AutoCompleteItem,
AutoCompleteList,
} from '@choc-ui/autocomplete';
export default () => {
const options = ['apple', 'appoint', 'zap', 'cap', 'japan'];
return (
<AutoComplete>
<AutoCompleteInput
variant="filled"
placeholder="Search..."
defaultValue="ap"
autoFocus
/>
<AutoCompleteList rollNavigation>
{options.map((option, oid) => (
<AutoCompleteItem
key={`option-${oid}`}
value={option}
textTransform="capitalize"
>
{option}
</AutoCompleteItem>
))}
</AutoCompleteList>
</AutoComplete>
);
};
You can create groups with the
AutoCompleteGroup
Component
import {
AutoComplete,
AutoCompleteGroup,
AutoCompleteInput,
AutoCompleteItem,
AutoCompleteList,
} from '@choc-ui/autocomplete';
export default () => {
const fruits = ['Apple', 'Grape', 'Pawpaw'];
const countries = ['Korea', 'Nigeria', 'India'];
return (
<AutoComplete>
<AutoCompleteInput
variant="filled"
placeholder="Search..."
pl="10"
defaultValue="ap"
autoFocus
/>
<AutoCompleteList rollNavigation>
<AutoCompleteGroup title="Fruits" showDivider>
{fruits.map((option, oid) => (
<AutoCompleteItem
key={`fruits-${oid}`}
value={option}
textTransform="capitalize"
>
{option}
</AutoCompleteItem>
))}
</AutoCompleteGroup>
<AutoCompleteGroup title="countries" showDivider>
{countries.map((option, oid) => (
<AutoCompleteItem
key={`countries-${oid}`}
value={option}
textTransform="capitalize"
>
{option}
</AutoCompleteItem>
))}
</AutoCompleteGroup>
</AutoCompleteList>
</AutoComplete>
);
};
To access the internal state of the
AutoComplete
, use a function as children (commonly known as a render prop). You'll get access to the internal stateisOpen
and methodonClose
.
import {
AutoComplete,
AutoCompleteInput,
AutoCompleteItem,
AutoCompleteList,
} from '@choc-ui/chakra-autocomplete';
import { ChevronDownIcon, ChevronRightIcon } from '@chakra-ui/icons';
import { Icon, InputGroup, InputRightElement } from '@chakra-ui/react';
export default () => {
const options = ['apple', 'appoint', 'zap', 'cap', 'japan'];
return (
<AutoComplete>
{({ isOpen }) => (
<>
<InputGroup>
<AutoCompleteInput variant="filled" placeholder="Search..." />
<InputRightElement
children={
<Icon as={isOpen ? ChevronRightIcon : ChevronDownIcon} />
}
/>
</InputGroup>
<AutoCompleteList rollNavigation>
{options.map((option, oid) => (
<AutoCompleteItem
key={`optio-${oid}`}
value={option}
textTransform="capitalize"
align="center"
>
{option}
</AutoCompleteItem>
))}
</AutoCompleteList>
</>
)}
</AutoComplete>
);
};
Watch the Icon on the right.
You can Render whatever you want. The
AutoComplete
Items are regularChakra
Boxes.
import {
AutoComplete,
AutoCompleteInput,
AutoCompleteItem,
AutoCompleteList,
} from '@choc-ui/chakra-autocomplete';
import { Avatar, Box, Text } from '@chakra-ui/react';
export default () => {
const people = [
{ name: 'Dan Abramov', image: 'https://bit.ly/dan-abramov' },
{ name: 'Kent Dodds', image: 'https://bit.ly/kent-c-dodds' },
{ name: 'Segun Adebayo', image: 'https://bit.ly/sage-adebayo' },
{ name: 'Prosper Otemuyiwa', image: 'https://bit.ly/prosper-baba' },
{ name: 'Ryan Florence', image: 'https://bit.ly/ryan-florence' },
];
return (
<AutoComplete>
<AutoCompleteInput
variant="filled"
placeholder="Search..."
pl="10"
defaultValue="ap"
autoFocus
/>
<AutoCompleteList rollNavigation>
{people.map((person, oid) => (
<AutoCompleteItem
key={`option-${oid}`}
value={person.name}
textTransform="capitalize"
align="center"
>
<Avatar size="sm" name={person.name} src={person.image} />
<Text ml="4">{person.name}</Text>
</AutoCompleteItem>
))}
</AutoCompleteList>
</AutoComplete>
);
};
NB: Feel free to request any additional Prop
in Issues.
Wrapper and Provider for AutoCompleteInput
and AutoCompleteList
AutoComplete composes Box so you can pass all Box props to change its style.
Prop |
Type | Description | Required | Default |
---|---|---|---|---|
children |
type children =
|ReactNode
| (props: {
isOpen: boolean;
onClose: () => void;
inputIsEmpty: boolean;
resetInput: () => void;
}) => ReactNode; |
Children can be a function which is provided with the |
No | โโโ |
onChange |
type onChange = (value: string) => void; |
Callback for when the autocomplete value changes, and when input changes if in |
No | โโโ |
emptyState |
type emptyState = boolean | ReactNode; |
Component to display when no options are found. set to true to use default. | No | No Options Found |
rollNavigation | boolean | set to true to allow keyboard navigation to restart on both ends. | No | false |
focusInputOnSelect | boolean | Determines if Input should be focused after an option is selected. | No | false |
freeSolo | boolean | Set freeSolo to true so the textbox can contain any arbitrary value. | No | false |
creatable | boolean | If true, allows creation of new Items, `freeSolo` must be true. | No | false |
selectOnFocus | boolean | select the text in input when input is focused openOnFocus - Open the suggestions once input is focused. |
No | false |
emphasize |
type emphasize = boolean | CSSObject; |
The parts of the option string that match the `AutoCompleteInput` value are emphasized. Pass boolean to bolden it, or a Chakra `CSSObject` for custom styling. |
No | false |
defaultIsOpen | boolean | If true, the suggestions menu is open by default | No | false |
onSelectOption |
type onSelectOption= (params: {
optionValue: string;
selectMethod: 'click' | 'keyboard';
isNewInput: boolean;
}) => boolean | void; |
Will be called every time suggestion is selected via mouse or keyboard. It returns the selectedValue, the selectionMethod and a boolean specifying if the input is a new one; useFul when combined with creatable mode. | No | โโโ |
suggestWhenEmpty | boolean | Return false to prevent selecting the option. | No | false |
closeOnBlur | boolean | If true, the menu will close when the AutoComplete Component loses focus. | No | true |
closeOnselect | boolean | If true, the menu will close when an item is selected, by mouse or keyboard. | No | true |
Input for AutoComplete
value.
AutoCompleteInput composes Input so you can pass all Input props to change its style.
Wrapper for AutoCompleteGroup
and AutoCompleteItem
AutoCompleteList composes Box so you can pass all Box props to change its style.
Wrapper for collections of AutoCompleteItem
s
AutoCompleteGroup composes Box so you can pass all Box props to change its style.
Prop |
Type | Description | Required | Default |
---|---|---|---|---|
title | string | The group title | No | โโโ |
titleStyles |
|
Styles for title decoration, if present | No |
const baseTitleStyles: TextProps = {
ml: '5',
mt: '0.5rem',
fontSize: 'xs',
letterSpacing: 'wider',
fontWeight: 'extrabold',
textTransform: 'uppercase',
}; |
showDivider | boolean | If true, a divider is shown | No | false |
dividerColor | string | Color for divider, if present | No | inherit |
This Composes your suggestions
AutoCompleteItem composes Flex so you can pass all Flex props to change its style.
Prop |
Type | Description | Required | Default |
---|---|---|---|---|
value | string | The value of the Option | yes |
โโโ |
_focus |
|
Styles for focused Item | No |
{
fontWeight: 'extrabold',
} |