如何禁用 material-ui 自動完成中的過濾選項？

Question

我正在使用 material-ui自動完成。 當用戶更改輸入時，它會異步從后端獲取建議。 這是代碼的一部分：

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>
        ),
      }}
    />
  )}
/>

問題是 material-ui 自動完成沒有顯示使用“setOptions”設置的所有選項。 它過濾它們。

例如：假設用戶輸入“appl”，getSuggestions返回[“apple”、“orange”、“potato”]。 但它只顯示“apple”，因為它過濾掉了“orange”和“potato”。

如何禁用過濾？

Answer 1

filterOptions方法旨在讓您自由決定哪些選項可用，哪些選項將被隱藏。

如果您只想顯示所有選項 - 只需實現filterOptions以返回所有值：

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