Как отключить параметры фильтрации в Material-UI Autocomplete?

Question

Я использую материал-интерфейс Автозаполнение . Когда пользователь изменяет ввод, он асинхронно выбирает предложения из серверной части. Это часть кода:

const [options, setOptions] = useState([]);

<Autocomplete
  ...
  freeSolo={true}
  options={options}
  renderInput={params => (
    <TextField
      ...
      {...params}
      onChange={async (e) => {
          // get suggestions from backend
          const suggestions = await getSuggestions(e.target.value);

          // update autocomplete options
          setOptions(suggestions);

          ...
      }}
      InputProps={{
        ...params.InputProps,
        endAdornment: (
          <React.Fragment>
            {loading ? <CircularProgress color="inherit" size={20} /> : null}
            {params.InputProps.endAdornment}
          </React.Fragment>
        ),
      }}
    />
  )}
/>

Проблема в том, что автозаполнение материала не показывает все опции, которые установлены с помощью "setOptions". Он фильтрует их.

, например: Предположим, что пользователь вводит «appl», а getSuggestions возвращает [«apple», «orange», «potato»]. Но он показывает только «яблоко», потому что отфильтровывает «апельсин» и «картофель».

Как я могу отключить фильтрацию?

Answer 1

Метод filterOptions предназначен для того, чтобы дать вам свободу выбора, какие опции будут доступны, а какие будут скрыты.

Если вы просто хотите показать все опции - просто используйте filterOptions для вернуть все значения:

filterOptions={(options, state) => options}

Answer 2

Пожалуйста, проверьте этот полный пример. надеюсь, это поможет вам.

import React from 'react';
import TextField from '@material-ui/core/TextField';
import { Autocomplete } from '@material-ui/lab';

export default function AutocompleteExample() {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={fruits}
      getOptionLabel={(option) => option.name}
      style={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
    />
  );
}

const fruits = [
  { name: 'Orange', count: 120 },
  { name: 'Guava', count: 229 },
  { name: 'Banana', count: 345 },
  { name: 'Mango', count: 432 },
  { name: 'Apple', count: 457 },
  { name: "Cucumber", count: 435 },
];