[Feature Request] Add Autocomplete component and introduce example of async call

[ajoslin103]

I don't know if you can do this...

Please consider somehow integrating https://www.npmjs.com/package/react-places-autocomplete, or: https://www.npmjs.com/package/material-ui-autocomplete-google-places,

I struggled through many different versions before finding one I could get working. (and it does work quite well once you get it going) The one I got working is a bit of a mess, I know you could do much better !!

It would be really nice for my form to have an address component whose data was gathered automatically

Thanks for your time and attention !

[dohomi]

@ajoslin103 integrating Autocomplete is currently on low priority I will see if I find time for it. I currently don't need it myself and I am pretty backed up with work.

[ajoslin103]

I understand!

There aren't enough cycles in the day !!

You are doing so much for me, if I can make it work I'll contribute it

[AntalyanGriffin]

Autocomplete would be incredibly useful; I couldn't use this otherwise great project for my form because of not supporting Autocomplete which I needed :/

[bryanltobing]

async autocomplete is all I needed but I still can't find the proper way to do this. :(

[dohomi]

This feature finally landed in version 3.9.0

Please visit https://react-hook-form-material-ui.vercel.app/?path=/story/autocomplete--basic to see some basic use cases.

[dohomi]

@bryantobing12 a simple way to solve with with the current version (example with apollo-client hook).

export function AsyncAutocomplete({ name, label, multiple, variables }: TermsSelectorProps) {
  const { loading, data, error } = useQuery(DOCUMENT_QUERY)
  if (error) {
    return (
      <Alert severity={'error'}>{error?.message}</Alert>
    )
  }
  return (
    <AutocompleteElement name={name}
                         loading={loading}
                         multiple={multiple}
                         label={label}
                         options={data?.term?.map(term => ({
                           id: term.id,
                           label: term.en
                         })) ?? []} />
  )
}