如何禁用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 Autocomplete 不显示使用“setOptions”设置的所有选项。它会过滤它们。

例如：假设用户输入“appl”，getSuggestions 返回 [“apple”, “orange”, “potato”]。但它只显示“苹果”，因为它过滤掉了“橙色”和“土豆”。

如何禁用过滤？

Answer 1

filterOptions

方法旨在让您自由决定哪些选项可用以及哪些选项隐藏。

如果您只想显示所有选项 - 只需实现

filterOptions

即可返回所有值：

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

Answer 2

嗯，返回所有值的filterOptions 对我来说不起作用。但还有另一个有效的实现。下面是链接。

https://lockstep.io/blog/debugging-lesson-well-learned-fixing-material-ui-autocomplete-search/