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&nbsp;freeSolo&nbsp;/>

Answer 3

freeSolo您可以使用条件 on和字段...的组合，noOptionsText如下所示：<Autocomplete&nbsp; &nbsp; freeSolo={inputValue?.length ? false : true}&nbsp; &nbsp; loading={isMatchingUsersLoading}&nbsp; &nbsp; loadingText={"Searching..."}&nbsp; &nbsp; options={matchingUsers}&nbsp; &nbsp; noOptionsText={"No matches..."}&nbsp; &nbsp; ....&nbsp;/>这将防止“空框”出现，并且仍然在适当的时间为您提供noOptionsText和文本。loading

Answer 4

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

Answer 5

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

Answer 6

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