@neoauto-ui/autocomplete

Autocomplete

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

Installation

yarn add @neoauto-ui/autocomplete

Import

import { Autocomplete } from '@neoauto-ui/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	-	-