如何为Material UI Autocomplete实现条件化noOptionsText？

要实现Material UI Autocomplete的两种空状态文本切换，核心是根据用户输入状态和选项数组的长度动态生成noOptionsText，具体实现如下：

核心思路 #

• 初始无输入时：显示「Type to search」
• 用户已输入但无匹配选项时：显示「No Results」
• 有匹配选项时：不显示无选项文本

代码实现 #

通过受控的inputValue跟踪用户输入，结合选项数组的状态动态计算文本：

import { useState } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

function SearchAutocomplete() {
  const [inputValue, setInputValue] = useState('');
  const [options, setOptions] = useState([]);

  // 处理输入变化，这里替换为你的实际数据加载逻辑
  const handleInputChange = (_, newInputValue) => {
    setInputValue(newInputValue);
    
    if (newInputValue) {
      // 模拟异步请求数据（实际项目中替换为API调用）
      setTimeout(() => {
        // 示例：根据输入过滤后无结果
        const fetchedOptions = []; 
        setOptions(fetchedOptions);
      }, 500);
    } else {
      setOptions([]);
    }
  };

  return (
    <Autocomplete
      options={options}
      inputValue={inputValue}
      onInputChange={handleInputChange}
      // 动态设置无选项文本
      noOptionsText={
        !inputValue ? 'Type to search' : options.length === 0 ? 'No Results' : ''
      }
      renderInput={(params) => <TextField {...params} label="Search" />}
    />
  );
}

export default SearchAutocomplete;

关键说明 #

1. 受控输入跟踪：通过inputValue和onInputChange完全控制输入状态，确保能准确判断用户是否已输入内容。
2. 动态文本计算：利用三元运算符直接在noOptionsText属性中判断状态，逻辑清晰简洁；如果后续逻辑复杂，也可抽成单独函数。
3. 异步适配：代码中模拟了异步加载数据的场景，实际项目中只需将setTimeout部分替换为你的API请求逻辑即可。

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