How to hide no option of mui autocomplete in react js?
January 10, 2023Hi Friends 👋,
Welcome To aGuideHub!
To hide no option of mui autocomplete in React js, you can use display: none;
in .MuiAutocomplete-noOptions
. It will hide no option of mui autocomplete in react js
Today, I am going to show you, how to hide no option of mui autocomplete in react js.
Installation
Install the following packages to use hide no option of mui autocomplete in react js.
npm
npm install @mui/material @emotion/react @emotion/styled
yarn
yarn add @mui/material @emotion/react @emotion/styled
MUI material hide no option of mui autocomplete example.
The below code is an example of a Material UI autocomplete hide no option. You have to import @mui material
autocomplete and use CSS class. MuiAutocomplete-noOptions
to set display: none;
. It will hide no option of mui autocomplete in react js.
App.js
import * as React from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
import "./App.css"
export default function ComboBox() {
const [open, setOpen] = React.useState(false);
return (
<Autocomplete
open={open}
onInputChange={(_, value) => {
if (value.length === 0) {
if (open) setOpen(false);
} else {
if (!open) setOpen(true);
}
}}
onClose={() => setOpen(false)}
options={top100Films}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Movie" />}
/>
);
}
const top100Films = [
{ label: "The Shawshank Redemption", year: 1994 },
{ label: "The Godfather", year: 1972 },
{ label: "The Godfather: Part II", year: 1974 },
{ label: "The Dark Knight", year: 2008 },
{ label: "12 Angry Men", year: 1957 },
{ label: "Schindler's List", year: 1993 },
{ label: "Pulp Fiction", year: 1994 },
{
label: "The Lord of the Rings: The Return of the King",
year: 2003
},
{ label: "The Good, the Bad and the Ugly", year: 1966 },
{ label: "Fight Club", year: 1999 },
{
label: "The Lord of the Rings: The Fellowship of the Ring",
year: 2001
},
{
label: "Star Wars: Episode V - The Empire Strikes Back",
year: 1980
},
{ label: "Forrest Gump", year: 1994 },
{ label: "Inception", year: 2010 },
{
label: "The Lord of the Rings: The Two Towers",
year: 2002
},
{ label: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ label: "Goodfellas", year: 1990 },
{ label: "The Matrix", year: 1999 },
{ label: "Seven Samurai", year: 1954 },
];
.MuiAutocomplete-noOptions{
display: none;
}
In the above code example, I have used the @mui/material
component and hide no option of mui autocomplete.
Check the output of the above code example.
All the best 👍