material-ui adding search icon in autocomplete component - reactjs

Question

I am using #material-ui autocomplete for search and I want to add search icon next to autocomplete component
I tried something like this but after changing ---- option fields is not displaying
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>
)
}}
/>
)}
/>
ANd if I just add searchicon it get added below the autocomplete component
<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

Answer 1

[this is output][1]
[1]: https://i.stack.imgur.com/JBSvO.png
import React, { useState, useEffect } from 'react';
import { TextField} from '#material-ui/core'
import InputAdornment from '#material-ui/core/InputAdornment';
import Autocomplete from '#material-ui/lab/Autocomplete';
import SearchIcon from '#material-ui/icons/Search';
import { makeStyles, Theme } from "#material-ui/core/styles";
export default function AddBusiness() {
const useStyles = makeStyles((theme: Theme) => ({
margin: {
padding: "10px 5px 5px 5px",
borderRadius: 4,
backgroundColor: theme.palette.common.white,
margin: theme.spacing(0),
border: "1px solid rgb(157, 157, 157)",
width: "100%",
},
}));
const classes = useStyles();
const [cityData, setCityData] = React.useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/todos')
.then(data => data.json())
.then(res => setCityData(res))
.catch(error => console.log(error))
}, [])
return (
<Autocomplete
id="combo-box-demo"
options={cityData}
getOptionLabel={(option: any) => option.title}
className={classes.margin}
style={{ paddingBottom: '8px' }}
renderInput={(params) => <TextField {...params} label=""
placeholder="Search City"
InputProps={{ ...params.InputProps,
startAdornment: ( <InputAdornment position="start"> <SearchIcon />
</InputAdornment> ),
disableUnderline: true }} />}
/>
)}

Answer 2

You can use display: "flex" for the parent to align its child in the same line.
And also align search icon at the center of the element,
<SearchIcon style={{ cursor: "pointer", padding: "17px" }} />
Hope you are expecting the same use case. Let me know if you are facing any issue.
Sample demo:- https://codesandbox.io/s/material-demo-forked-v17jz?file=/demo.js

Answer 3

This is the way you can customize the popup Icon
<Autocomplete
className={classes.root}
id="combo-box-demo"
options={boards}
getOptionLabel={(option) => option}
forcePopupIcon={true}
popupIcon={<SearchIcon />}
renderInput={(params) => (
<>
<TextField
placeholder="search"
{...params}
label="Combo box"
variant="filled"
/>
</>
)}
/>