如何设置Material-UI Autocomplete仅在输入文本后才弹出下拉选项

极简方案（无需新增额外状态） #

直接给Autocomplete添加filterOptions属性即可，原有其他配置完全不用改，代码如下：

<Autocomplete
  id="combo-box"
  options={listofitems}
  value={itemid}
  onChange={viewitemlist}
  // 新增这一行即可实现需求
  filterOptions={(options, state) => state.inputValue.trim() ? options : []}
  renderInput={(params) => <TextField {...params}
    label="Item Id"
    variant="outlined" />}
/>

逻辑说明 #

filterOptions是Material-UI Autocomplete自带的回调属性，用于自定义过滤下拉选项，回调的第二个参数state中包含当前输入框的输入值inputValue。当输入值为空时直接返回空数组，组件不会渲染空的下拉列表；有输入值时返回原始可选列表，展示匹配的下拉选项。

自定义控制方案（适合需要额外处理输入逻辑的场景） #

如果后续需要对输入内容做额外校验、防抖搜索等操作，可以新增状态监听输入值，步骤如下：

• 新增输入值监听状态

import { useState } from 'react';

// 组件内部声明状态
const [inputValue, setInputValue] = useState('');

• 修改Autocomplete配置

<Autocomplete
  id="combo-box"
  options={inputValue.trim() ? listofitems : []}
  value={itemid}
  onChange={viewitemlist}
  inputValue={inputValue}
  onInputChange={(_, newVal) => setInputValue(newVal)}
  renderInput={(params) => <TextField {...params}
    label="Item Id"
    variant="outlined" />}
/>

如果需要自定义匹配规则，直接对listofitems做过滤即可，示例：

// 示例为模糊匹配输入内容，可根据实际数据结构调整
options={inputValue.trim() ? listofitems.filter(item => item.toLowerCase().includes(inputValue.toLowerCase())) : []}

内容的提问来源于stack exchange，提问作者OnePiece