如何禁用 material-ui Autocomplete 中的过滤选项?

Hsn*_*edi 10 autocomplete reactjs material-ui react-hooks

我正在使用 material-ui Autocomplete。当用户更改输入时,它会异步从后端获取建议。这是代码的一部分:

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>
        ),
      }}
    />
  )}
/>
Run Code Online (Sandbox Code Playgroud)

问题是 material-ui 自动完成没有显示使用“setOptions”设置的所有选项。它过滤它们。

例如:假设用户输入“appl”,getSuggestions 返回[“apple”, “orange”, “potato”]。但它只显示“apple”,因为它过滤掉了“orange”和“potato”。

如何禁用过滤?

Dek*_*kel 18

filterOptions方法旨在让您自由决定哪些选项可用,哪些将隐藏。

如果您只想显示所有选项 - 只需实现filterOptions返回所有值:

filterOptions={(options, state) => options}
Run Code Online (Sandbox Code Playgroud)

  • 看到有一个默认的filterOptions 有点惊讶(尽管它是有道理的)。这让我很困惑,因为我正在使用容错搜索引擎来获取自动完成选项,而 Material UI 则进行了更严格的比较,并从搜索引擎中隐藏了一些结果。感谢您的回答! (2认同)