how to add drop down list in material-UI Search component in navbar, for search results

Question

I was using material ui search bar into navbar from app-bar-with-search-field official documnets from MUI in my react app. but this article it does not mention how to add dropdown list on selecting search input field.

I was tried many ways including Menu, List components from MUI for implement drop menu but didn't work for me. please help me to figure it out how i can add dropdown list of width of serach bar for showing a search results. codesendbox link

code in my App.js

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";

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 App() {
  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" }}
                      />
                    </Search>
                  </Box>
                </React.Fragment>
              </ul>
            </div>
          </div>
        </nav>
      </div>
    </div>
  );
}

thank you.

Answer 1

Like suggestion from @rupesh patil, you should change to Autocomplete, or you also can make List show under Search input when your input search is focused and catch keyup event to search for result manually.

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>
  );
}