在输入文本之前隐藏 Material-UI 自动完成弹出窗口

Question

我有一个有效的 Material-UI Autocomplete 实现，但是目前当您单击 select 一个项目时，它会显示一个可单击的下拉列表，其中包含所有项目除了文本搜索。

我希望在先输入内容之前不显示下拉选项。

<Autocomplete
  id="combo-box"
  options={listofitems}
  value={itemid}
  onChange={viewitemlist}
  renderInput={(params) => <TextField {...params}
    label="Item Id"
    variant="outlined" />}
/>

Answer 1

您可以控制 open 状态并告诉 Autocomplete 只有在用户输入内容后才打开弹出窗口。

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)}
    {...}
  />
);

在输入文本之前隐藏 Material-UI 自动完成弹出窗口

Hide Material-UI Autocomplete popup until text is typed

autocomplete

reactjs

material-ui

现场演示