en-US

Group list.

zh-CN

对选项进行分组。

import { useState } from 'react';

import { DAutoComplete, DInput } from '@react-devui/ui';

export default function Demo() {
  const [value, setValue] = useState('');
  const [list, setList] = useState([]);

  return (
    <DAutoComplete
      dList={list}
      onItemClick={(val) => {
        setValue(val);
      }}
    >
      <DInput
        dModel={value}
        onModelChange={(val) => {
          setValue(val);
          setList(
            Array.from({ length: val ? 3 : 0 }).map((_, i) => ({
              value: `Group ${i + 1}`,
              children: Array.from({ length: 3 }).map((_, ci) => ({
                value:
                  `G${i + 1}-` +
                  Array(ci + 1)
                    .fill(val)
                    .join(''),
              })),
            }))
          );
        }}
      />
    </DAutoComplete>
  );
}