AutoComplete

<AutoComplete
  options={[
    { id: '1', name: 'The Shawshank Redemption' },
    { id: '2', name: 'The Godfather' },
  ]}
/>

<AutoComplete
  multiple
  options={[
    {
      id: '1',
      name: 'option 1',
      icon: <AdbIcon />,
      description: 'description options',
    },
    {
      id: '2',
      name: 'option 2',
      icon: <Avatar src={doopageLogo} size={'small'} />,
      description: 'description options',
    },
    {
      id: '3',
      name: 'option 3',
      avatar: doopageLogo,
      description: 'description options',
    },
    {
      id: '4',
      name: 'option 4',
      image: doopageLogo,
      description: 'description options',
    },
  ]}
/>

<AutoComplete
  multiple
  placeholder="Select options"
  label="AutoComplete Multiple"
  variant="outlined"
  chipColor="info"
  options={Array(10)
    .fill(0)
    .map((item, index) => ({
      id: index.toString(),
      name: `option ${index}`,
      icon:
        index % 2 ? <AdbIcon /> : <Avatar src={doopageLogo} size={'small'} />,
      description: `description option ${index}`,
    }))}
/>

() => {
  const [valueSingle, setValueSingle] = useState('3')
  const [valueMulti, setValueMulti] = useState(['1', '2'])
  const options = useMemo(
    () =>
      Array(10)
        .fill(0)
        .map((item, index) => ({
          id: index.toString(),
          name: `option ${index}`,
        })),
    [],
  )
  return (
    <div>
      <div style={{ fontSize: 15, marginBottom: 10 }}>
        Single Value: {valueSingle}
      </div>
      <AutoComplete
        placeholder="Select options"
        label="AutoComplete Single"
        variant="outlined"
        value={valueSingle}
        onChange={value => {
          setValueSingle(value)
        }}
        options={options}
      />
      <br />
      <div style={{ fontSize: 15, marginBottom: 10 }}>
        Multiple Value: {valueMulti.join(', ')}
      </div>
      <AutoComplete
        multiple
        placeholder="Select options"
        label="AutoComplete Multiple"
        variant="outlined"
        value={valueMulti}
        onChange={value => {
          setValueMulti(value)
        }}
        options={options}
      />
    </div>
  )
}

() => {
  const [values, setValues] = useState(['1', '2'])
  const [value, setValue] = useState('1')
  return (
    <div>
      <div style={{ fontSize: 15, marginBottom: 10 }}>Value: {value}</div>
      <AutoComplete
        allowCreate
        placeholder="Select options or typing to add"
        label="Single"
        variant="outlined"
        value={value}
        onChange={value => {
          setValue(value)
        }}
        options={Array(10)
          .fill(0)
          .map((item, index) => ({
            id: index.toString(),
            name: `option ${index}`,
          }))}
        setCreateText={value => `Add "${value}"`}
      />
      <div style={{ fontSize: 15, marginBottom: 10, marginTop: 10 }}>
        Value: {values.join(', ')}
      </div>
      <AutoComplete
        allowCreate
        multiple
        placeholder="Select options or typing to add"
        label="Multiple"
        variant="outlined"
        value={values}
        onChange={value => {
          setValues(value)
        }}
        options={Array(10)
          .fill(0)
          .map((item, index) => ({
            id: index.toString(),
            name: `option ${index}`,
          }))}
        chipProps={{
          outlined: false,
          rounded: true,
          color: 'success',
        }}
        setCreateText={value => `Add "${value}"`}
        showCreateText={false}
        allowDuplicates
      />
    </div>
  )
}

() => {
  const [value, setValue] = useState(['1', '2'])
  return (
    <div>
      <div style={{ fontSize: 15, marginBottom: 10 }}>
        Value: {value.join(', ')}
      </div>
      <AutoComplete
        allowCreate
        multiple
        placeholder="Select options"
        label="AutoComplete Multiple"
        variant="outlined"
        value={value}
        onChange={value => {
          setValue(value)
        }}
        options={Array(10)
          .fill(0)
          .map((item, index) => ({
            id: index.toString(),
            name: `option ${index}`,
            color: index % 2 === 0 ? '#D8BFD8' : undefined,
          }))}
      />
    </div>
  )
}

() => {
  const [loading, setLoading] = useState(false)
  const [options, setOptions] = useState([])
  const [error, setError] = useState('')
  const getData = value => {
    setLoading(true)
    fetch('YOUR API')
      .then(response => {
        // set OPTIONS
        // setOptions(YOUR RESPONSE)
      })
      .catch(err => {
        // setError(err)
      })
    setLoading(false)
  }
  return (
    <div>
      <AutoComplete
        error={error}
        loading={loading}
        getData={getData}
        multiple
        placeholder="Typing your keyword"
        label="Search google"
        options={options}
      />
    </div>
  )
}