как сделать поле автозаполнения в React для получения данных с сервера при вводе - PullRequest
Новая
       40

как сделать поле автозаполнения в React для получения данных с сервера при вводе

0 голосов
/ 08 мая 2020

Я хотел бы получить текстовое поле с функцией автозаполнения, которая вызывает backend api каждый раз, когда пользователь что-то вводит, а затем после 3 символов.

Текущий код выглядит так: 

  const termRef = useRef('ass')
  const professions = useRef<JobTitle[]>([])
  const [fetchJobTitlesCall, { loading, data, error }] = useLazyQuery<Jobtitles, JobtitlesVariables>(JobTitlesQuery, {
    onCompleted: response => {
      console.log('autocpmplete finished..')
      professions.current = response.jobTitles.jobTitles
      console.log('professions.current', professions.current)
    },
  })

  const fetchJobTitles = (e: React.ChangeEvent<any>) => {
        if (e.target.value.length >= 3) {
           termRef.current = e.target.value
           fetchJobTitlesCall({ variables: { keyword: termRef.current } })
      }
  }

  <Autocomplete
     onChange={(event, value) => console.log(value)}
     multiple
     id="tags-outlined"
     options={professions.current}
     getOptionLabel={option => option.name}
     filterSelectedOptions
     renderInput={params => (
                    <TextField
                      {...params}
                      onChange={event => fetchJobTitles(event)}
                      variant="outlined"
                      label="Select Job Title"
                      placeholder="Select Job Title"
                    />
        )}
   />

Проблема с этим решением заключается в том, что поле сбрасывается каждый раз, когда я вызываю fetchJobTitlesCall (), также данные не обновляются в значениях параметров автозаполнения !

Есть идеи, как этого добиться?

...