我正在使用@material-ui自动完成组件进行搜索,并希望在自动完成组件旁边添加搜索图标。
我尝试了类似以下的代码,但在更改----选项字段后无法显示字段。
我尝试了类似以下的代码,但在更改----选项字段后无法显示字段。
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
.
.
.
<Autocomplete
id="combo-box-demo"
options={this.state.results} // .map((option) => option.title_display)
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
onInputChange={this.handleInputChange}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
InputProps={{
endAdornment: (
<InputAdornment>
<IconButton>
<SearchIcon />
</IconButton>
</InputAdornment>
)
}}
/>
)}
/>
如果我只是添加搜索图标,它会被添加到自动完成组件的下方。
<Fragment>
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>
<SearchIcon />
</Fragment>
https://codesandbox.io/s/material-demo-forked-qt99q?file=/demo.js
InputProps={{ ...params.InputProps, ..
正是我所需要的。 - iulial