Part 2: Building High Performance Virtualized Select in Material UI using react-window

Hi there! Welcome to my blog, this is Alan.

As promised, I will share with you the last part of High Performance Select — the Search Box that will make the Select more professional!

If you haven’t read the Part 1 yet, here is the link:

Part 1: Building High Performance Virtualized Select in Material UI using react-windowHi there! Welcome to my blog, this is Alan.blog.hieu.page

Alright, let’s continue and create the Search Box:

1// import new Component
2
3import SearchIcon from "@mui/icons-material/Search";
4import Clear from "@mui/icons-material/Clear";
5
6{/* ===== Search box ===== */}
7<Box
8  sx={{
9    borderBottom: "1px solid",
10    borderColor: "grey.200",
11    display: "flex",
12    alignItems: "center",
13  }}
14>
15  <TextField
16    value={search}
17    placeholder="Search"
18    onChange={(evt) => setSearch(evt.target.value)}
19    slotProps={{
20      input: {
21        startAdornment: (
22          <InputAdornment position="start">
23            <SearchIcon fontSize="small" sx={{ color: "grey.400" }} />
24          </InputAdornment>
25        ),
26        endAdornment: search ? (
27          <InputAdornment
28            onClick={() => setSearch("")}
29            sx={{ cursor: "pointer" }}
30            position="start"
31          >
32            <Clear sx={{ color: "grey.400" }} fontSize="small" />
33          </InputAdornment>
34        ) : null,
35      },
36    }}
37    sx={{
38      width: "100%",
39      "& .MuiOutlinedInput-notchedOutline": {
40        border: "none",
41      },
42    }}
43    size="small"
44  />
45</Box>

Put the code block above right before the FixedSizeList:

Press enter or click to view image in full size

Let’s add Search state and Search function:

1
2  const [search, setSearch] = useState("");

And filter the options based on Search keyword:

Press enter or click to view image in full size

Change itemCount to list.length instead:

Woohoo!

Press enter or click to view image in full size

To make it even better, you can make an optional property to allow keeping Select open when multiple, that will be easier for user when they are selecting many options.

That’s it for the High Performance Select.

Good luck with your next project.

Thanks for reading!

Github: https://github.com/alanng2050/blog-material-ui-virtualized-select