Material-UI: 如何仅在输入内容时显示自动完成下拉列表？

Question

如何只在输入内容时显示Material-UI Autocomplete下拉列表？我在我的一个项目中添加了一个 Material-UI Autocomplete 组件。但问题是当我点击 TextField 时，它会自动下拉所有列表选项。我只想在用户要输入内容时下拉建议。下面是我的代码。

import React, { useEffect, useState } from "react";
import { Grid, Popper } from "@material-ui/core";
import axios from "axios";
import Autocomplete from "@material-ui/lab/Autocomplete";

import { useStyles, CssTextField } from "./classes";

export default function SearchItems({ setFieldValue, dialogOpen }) {
  const classes = useStyles();
  const [results, setResults] = useState([]);


  useEffect(() => {
    loadSearchItemsList();
  }, []);
  //load restaurants and tags
  const loadSearchItemsList = async () => {
    try {
      let { data } = await axios.get("/search");
      // console.log(data)
      setResults(data);
    } catch (error) {
      //   setAlert({
      //     showAlert: true,
      //     severity: "error",
      //     message: "Loading failed!",
      //   });
      dialogOpen(true)
    }
  };

    
  return (
    <Grid item xs={12} sm={12} md={12} lg={12} className={classes.gapSpace}>
        <Autocomplete             
          id="free-solo-demo"
          freeSolo             
          getOptionLabel={(option) => option.name}          
          autoComplete            
                
          onChange={(event, newValue) => {
            if (newValue) {
              const { id, type, name } = newValue;
              
              setFieldValue("id", id);
              setFieldValue("type", type);
              setFieldValue("name", name);

            } else {
              setFieldValue("id", null);
              setFieldValue("type", null);
              setFieldValue("name", null);

            }
          }}
          options={results}            
         
          renderInput={(params) => (
            <CssTextField              
              {...params}

              className={classes.input}           
              placeholder="Restaurant, Food"
              variant="outlined"
              id="custom-css-outlined-input"   
                    
            />
            
          )}
        />     
    </Grid>
  );
}

Answer 1

可以控制Autocomplete的open和inputValue状态，当inputValue没有内容时调用setOpen(false)关闭菜单列表:

const [open, setOpen] = useState(false);
const [inputValue, setInputValue] = useState("");

return (
  <Autocomplete
    open={open}
    onOpen={() => {
      // only open when in focus and inputValue is not empty
      if (inputValue) {
        setOpen(true);
      }
    }}
    onClose={() => setOpen(false)}
    inputValue={inputValue}
    onInputChange={(e, value, reason) => {
      setInputValue(value);

      // only open when inputValue is not empty after the user typed something
      if (!value) {
        setOpen(false);
      }
    }}
    options={top100Films}
    renderInput={(params) => (
      <TextField {...params} label="Combo box" variant="outlined" />
    )}
  />
);

Material-UI: 如何仅在输入内容时显示自动完成下拉列表？

Material-UI: How to show Autocomplete dropdown list only when typing something?

reactjs

autocomplete

material-ui

现场演示