Autocomplete

The autocomplete is a normal text input enhanced by a panel of suggested options.

Installation

yarn add @neokit/autocomplete

Import

import { Autocomplete } from '@neokit/autocomplete';

Basic Usage

<Box maxWidth="220px">
  <Autocomplete
    options={[
      { id: 1, label: 'kia tucson' },
      { id: 2, label: 'mitsubishi accent' }
    ]}
    placeholder="Buscar" />
</Box>

Options structure

const options = [
  { id: 1, label: 'kia tucson' }
];

// or

const options = [
  { id: 1, label: 'kia tucson', value: 'https://www.google.com.pe' }
];

Autocomplete sizes

Use the size prop to change the size of the input. You can set the value to xs, sm, md, or lg.

<Group>
  <Autocomplete
    size="lg"
    options={[
      { id: 1, label: 'kia tucson' },
      { id: 2, label: 'mitsubishi accent' }
    ]}
    placeholder="Buscar" />
  <Autocomplete
    size="md"
    options={[
      { id: 1, label: 'kia tucson' },
      { id: 2, label: 'mitsubishi accent' }
    ]}
    placeholder="Buscar" />
  <Autocomplete
    size="sm"
    options={[
      { id: 1, label: 'kia tucson' },
      { id: 2, label: 'mitsubishi accent' }
    ]}
    placeholder="Buscar" />
  <Autocomplete
    size="xs"
    options={[
      { id: 1, label: 'kia tucson' },
      { id: 2, label: 'mitsubishi accent' }
    ]}
    placeholder="Buscar" />
</Group>

Autocomplete loading state

Pass the isLoading prop to show its loading state.

<Box maxWidth="220px">
  <Autocomplete
    options={[]}
    isLoading
    placeholder="Buscar" />
</Box>

Autocomplete disabled state

Pass the isDisabled prop to disabled button action.

<Box maxWidth="220px">
  <Autocomplete
    options={[]}
    isDisabled
    placeholder="Buscar" />
</Box>

Autocomplete display

To take full width of the parent element, use isFullWidth prop.

<Box maxWidth="100%">
  <Autocomplete
    options={[
      { id: 1, label: 'kia tucson' },
      { id: 2, label: 'mitsubishi accent' }
    ]}
    isFullWidth
    placeholder="Buscar" />
</Box>

Input error

To add an error state to the input, use the isInvalid prop.

You can also pass the errorMessage prop to display an error text at the bottom of the input.

<Box maxWidth="220px">
  <Autocomplete
    options={[]}
    isInvalid
    errorMessage="Mensaje de error"
    placeholder="Buscar" />
</Box>

Input label

To add a label to the input, use the label prop.

You can also pass the labelColor prop to change the color of the label.

<Box maxWidth="220px">
  <Autocomplete
    options={[]}
    label="Marcas"
    labelColor="#FA0000"
    placeholder="Buscar" />
</Box>

Autocomplete regexPattern

By default, the autocomplete component accepts all characters. But if you want to config that, you can pass the regexPattern prop.

<Box maxWidth="220px">
  <Autocomplete
    placeholder="Buscar"
    regexPattern={/^\s+|[^0-9a-zA-Zñ -]/g} />
</Box>

Custom Autocomplete

You can also give the icon prop to render the icon inside autocomplete component and custom the color.

If you want to change the focus color, you can pass the prop focusBorderColor and also you can change the close icon color with the closeIconColor.

<Autocomplete
  options={[
    { id: 1, label: 'kia tucson' },
    { id: 2, label: 'mitsubishi accent' }
  ]}
  icon={<Search />}
  placeholder="Buscar"
  focusBorderColor="#FA9300"
  closeIconColor="#000000" />

Async Autocomplete

You can receive async options in Autocomplete component.

const AutocompleteAsync = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [isOpen, setIsOpen] = useState(false);
  const [options, setOptions] = useState([]);

  const fetchAutocomplete = () => {
    setIsOpen(false);
    setIsLoading(true);
    fetch('https://retoolapi.dev/VEm6w1/autocomplete')
      .then(res => res.json())
      .then(data => {
        setIsLoading(false);
        setIsOpen(true);
        setOptions(data);
      })
      .catch(error => {
        setIsLoading(false);
        setIsOpen(false);
        console.error(error);
      });
  };

  const handleInput = () => {
    fetchAutocomplete();
  };

  return (
    <Autocomplete
      isFullWidth
      async
      options={options}
      placeholder="Buscar"
      focusBorderColor="#FA9300"
      closeIconColor="#000000"
      icon={<Search />}
      isLoading={isLoading}
      isOpen={isOpen}
      onInput={handleInput}
      onChange={(data) => console.log(data, 'onChange')}
      onClickItem={(value) => console.log(value, 'onClickItem')}
      onClickIcon={() => console.log('onClickIcon')} />
  );
};

  <Box maxWidth="368px" isFullWidth>
    <AutocompleteAsync />
  </Box>

Props

| Name | Type | Description | Default | |------------------- | ------------- | ----------- | ------- | | options | Array | The value must be chosen from a predefined set of allowed values. | - | | name | String | - | - | | defaultId | String | You can set defaultId if you want to preload id | - | | value | String | You can set value if you want to preload value | - | | onChange | Func | Callback when the autocomplete change | - | | onInput | Func | Callback when the text of input change | - | | onEnter | Func | Callback when the user press Enter key | - | | placeholder | String | - | - | | autoComplete | String | - | 'off' | | isReadOnly | Bool | If true, the form control will be readonly | false | | size | xs,sm,md,lg | - | 'md' | | isInvalid | Bool | If true, the form control will be invalid | false | | focusBorderColor | String | The border color when the autocomplete is focused. | - | | isLoading | Bool | - | false | | isDisabled | Bool | - | false | | onClickItem | Func | Callback when click item results | - | | label | String | - | - | | labelColor | String | - | '#000000' | | errorMessage | String | - | - | | isOpen | Bool | - | false | | async | Bool | If true, autocomplete wait for option results | false | | isFullWidth | Bool | If true, the autocomplete element will span the full width of its parent. | false | | icon | Node | The icon element to use in the autocomplete. | - | | iconColor | String | The color of the icon. | - | | onClickIcon | Func | Callback when click on icon | - | | closeIconColor | String | - | '#757575' | | loadingIconColor | String | - | '#FA9300' | | regexPattern | RegExp | - | - |