Material UI 自动完成的多行选项
Multiline options for Material UI autocomplete
我正在尝试进行自动完成,其中每个选项在第一行有 user
的 firstName
和 lastName
,在第二行有 id
。
这是我试过的方法
<Autocomplete
freeSolo
disableClearable
options={users}
getOptionLabel={(option) => option.firstName + " " + option.lastName}
renderOption={(option) => {
return (
<>
<div>
{option.firstName} {option.lastName}
</div>
<div>{option.id}</div>
</>
);
}}
renderInput={(params) => (
<TextField
{...params}
label="Username or ID"
// margin="normal"
variant="outlined"
value={name}
onChange={handleChange}
className={classes.input}
InputProps={{
...params.InputProps,
type: "search",
}}
/>
)}
/>
我要从 renderOption
返回一个组件,但它不支付参加 <div>
或 <br/>
标签的费用。它只是把所有东西都放在一起
只需使用适当的div即可在下一行显示。单个外部 div 和一个嵌套 div 以在下一行显示 id。
renderOption={(option) => {
return (
<>
<div>
{option.title} {option.title}
<div>
{option.title}
</div>
</div>
</>
);
}}
我正在尝试进行自动完成,其中每个选项在第一行有 user
的 firstName
和 lastName
,在第二行有 id
。
这是我试过的方法
<Autocomplete
freeSolo
disableClearable
options={users}
getOptionLabel={(option) => option.firstName + " " + option.lastName}
renderOption={(option) => {
return (
<>
<div>
{option.firstName} {option.lastName}
</div>
<div>{option.id}</div>
</>
);
}}
renderInput={(params) => (
<TextField
{...params}
label="Username or ID"
// margin="normal"
variant="outlined"
value={name}
onChange={handleChange}
className={classes.input}
InputProps={{
...params.InputProps,
type: "search",
}}
/>
)}
/>
我要从 renderOption
返回一个组件,但它不支付参加 <div>
或 <br/>
标签的费用。它只是把所有东西都放在一起
只需使用适当的div即可在下一行显示。单个外部 div 和一个嵌套 div 以在下一行显示 id。
renderOption={(option) => {
return (
<>
<div>
{option.title} {option.title}
<div>
{option.title}
</div>
</div>
</>
);
}}