Add autocomplete support to input component

[FHU-yezi]

When I go through the documentation of Input component, I noticed that we should support autocomplete feature.

Just googled and found chakra-ui-simple-autocomplete, a Chakra UI related library licensed in MIT.

Copy the example code there:

import { Autocomplete, Option } from 'chakra-ui-simple-autocomplete';

const options = [
  { value: 'javascript', label: 'Javascript' },
  { value: 'chakra', label: 'Chakra' },
  { value: 'react', label: 'React' },
  { value: 'css', label: 'CSS' },
];

const AutocompleteWrapper = () => {
  const [result, setResult] = React.useState<Option[]>([]);

  return (
      <Box maxW="md">
        <Autocomplete
          options={options}
          result={result}
          setResult={(options: Option[]) => setResult(options)}
          placeholder="Autocomplete"
        />
      </Box>
  );
};

So we should include this in our front-end build, and add some props as well as an event linstener, maybe called on_autocomplete_selected.

By the way, we need to give a chance that user can change options dynamicly, so we can query the database and change them, sounds like search component which we are working on.