As per the suggestion from @rupesh patil, it is recommended to switch to Autocomplete. Additionally, you can consider displaying a List under the Search input when the search input is focused, and then utilize the keyup event to manually search for results.
import "./styles.css";
import * as React from "react";
import { styled, alpha } from "@mui/material/styles";
import Box from "@material-ui/core/Box";
import InputBase from "@mui/material/InputBase";
import SearchIcon from "@mui/icons-material/Search";
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
const options = ['Option 1', 'Option 2'];
const Search = styled("div")(({ theme }) => ({
position: "relative",
borderRadius: theme.shape.borderRadius,
backgroundColor: alpha(theme.palette.common.black, 0.15),
"&:hover": {
backgroundColor: alpha(theme.palette.common.black, 0.25)
},
marginTop: "5px",
marginLeft: 0,
width: "100%",
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(1),
width: "auto"
}
}));
const SearchIconWrapper = styled("div")(({ theme }) => ({
padding: theme.spacing(0, 2),
height: "100%",
position: "absolute",
pointerEvents: "none",
display: "flex",
alignItems: "center",
justifyContent: "center"
}));
const StyledInputBase = styled(InputBase)(({ theme }) => ({
color: "red",
"& .MuiInputBase-input": {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
transition: theme.transitions.create("width"),
width: "100%",
[theme.breakpoints.up("sm")]: {
width: "12ch",
"&:focus": {
width: "20ch"
}
},
[theme.breakpoints.down("sm")]: {
width: "0ch",
"&:focus": {
width: "12ch"
}
}
}
}));
export default function ControllableStates() {
const [value, setValue] = React.useState(options[0]);
const [inputValue, setInputValue] = React.useState('');
return (
<div className="App">
<div>
<nav
id="navbar"
className=" pt-0 pb-0 ps-3 container-row navbar-dark navbar navbar-expand-lg nav-div fixed-top"
>
<div className="container">
<div className="navbar-brand">
<h1 className="logo-text mt-1 text-dark">project logo</h1>
</div>
<div className="nav-list">
<ul className="nav navbar-nav ms-auto mb-2 mb-lg-0">
<React.Fragment>
<Box
sx={{
display: "flex",
alignItems: "center",
textAlign: "center"
}}
>
<Search>
<SearchIconWrapper>
<SearchIcon />
</SearchIconWrapper>
{/* <StyledInputBase
placeholder="Search Organization ..."
inputProps={{ "aria-label": "search" }}
/> */}
<Autocomplete
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
inputValue={inputValue}
onInputChange={(event, newInputValue) => {
setInputValue(newInputValue);
}}
id="controllable-states-demo"
options={options}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Search Organization ..." />}
/>
</Search>
</Box>
</React.Fragment>
</ul>
</div>
</div>
</nav>
</div>
</div>
);
}