React Material-UI 自动完成自定义“无选项”文本

Question

我正在查看 MaterialUI 提供的自动完成示例

https://codesandbox.io/s/81qc1

我想知道如果没有找到结果，我如何显示“未找到选项”消息。

Answer 1

使用道具noOptionsText进行 Material-UI 自动完成

没有选项时显示的文本。 出于本地化目的，您可以使用提供的翻译。

• 参考：自动完成文档 API

import Autocomplete from '@material-ui/lab/Autocomplete';

<Autocomplete
  noOptionsText={'Your Customized No Options Text'}
  ...
/>

Answer 2

对于那些根本不希望“无选项”出现的人，

<Autocomplete 
    freeSolo={true}
/>

Answer 3

我建议您检查此链接以快速轻松地实现自动完成功能。 但是，如果您想使用 useAutocomplete 构建自己的自动完成组件，请选中此

Answer 4

在寻找noOptionsText道具的文档中： https://material-ui.com/api/autocomplete/

Answer 5

你可以使用 noOption：

<Asynchronous
              noOption={  <div className="d-flex align-items-center justify-content-between mt-2">
                  <span className="fw-bold">User not found?</span>
                  <Button variant="text" color="primary" type="button" startIcon={<AddIc fontSize="small"/>} onClick={()=>setOpenModal(true)}>Add
                      User</Button>
              </div>}
/>

Answer 6

const theme = createTheme(
  {
    components: {
      MuiAutocomplete: {
        defaultProps: {
          noOptionsText: 'any text you want',
        },
      },
    },
  }
);