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

Question

我正在查看 MaterialUI 提供的自动完成示例https://codesandbox.io/s/81qc1我想知道如果没有找到结果，如何显示“未找到选项”消息。

Answer 1

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

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

参考：Autocomplete API文档

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

<Autocomplete

  noOptionsText={'Your Customized No Options Text'}

  ...

/>

Answer 2

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

<Autocomplete freeSolo />

Answer 3

freeSolo您可以使用条件 on和字段...的组合，noOptionsText如下所示：

<Autocomplete

    freeSolo={inputValue?.length ? false : true}

    loading={isMatchingUsersLoading}

    loadingText={"Searching..."}

    options={matchingUsers}

    noOptionsText={"No matches..."}

    .... 

/>

这将防止“空框”出现，并且仍然在适当的时间为您提供noOptionsText和文本。loading

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',

        },

      },

    },

  }

);