如何在Material UI Autocomplete空选项列表中显示占位符？

可以通过以下两种实用方法实现需求：

方法一：自定义noOptionsText并结合输入状态判断 #

Autocomplete的noOptionsText属性可自定义无选项时的显示文本，但默认会在「初始选项为空」和「搜索后无匹配结果」两种场景触发。通过结合输入框的value状态，就能区分两种场景，分别显示对应文本：

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

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

  // 模拟输入时加载选项的逻辑
  const handleInputChange = (event, newInputValue) => {
    setInputValue(newInputValue);
    if (newInputValue.trim()) {
      // 替换为你的实际数据请求逻辑
      setTimeout(() => {
        setOptions([
          { label: `选项1: ${newInputValue}`, value: newInputValue },
          { label: `选项2: ${newInputValue}`, value: newInputValue + '_2' },
        ]);
      }, 500);
    } else {
      setOptions([]);
    }
  };

  // 根据输入状态返回对应提示文本
  const getNoOptionsText = () => {
    return inputValue.trim() === '' 
      ? '请输入内容获取相关选项' 
      : '未找到匹配的选项';
  };

  return (
    <Autocomplete
      options={options}
      inputValue={inputValue}
      onInputChange={handleInputChange}
      noOptionsText={getNoOptionsText()}
      renderInput={(params) => <TextField {...params} label="输入搜索" />}
    />
  );
}

方法二：通过ListboxProps自定义下拉容器内容 #

如果需要更复杂的占位符样式（比如添加图标、自定义排版），可以利用ListboxProps覆盖下拉列表内容，当选项为空且无输入时，渲染自定义占位符组件：

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

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

  const handleInputChange = (event, newInputValue) => {
    setInputValue(newInputValue);
    if (newInputValue.trim()) {
      setTimeout(() => {
        setOptions([
          { label: `选项1: ${newInputValue}`, value: newInputValue },
          { label: `选项2: ${newInputValue}`, value: newInputValue + '_2' },
        ]);
      }, 500);
    } else {
      setOptions([]);
    }
  };

  return (
    <Autocomplete
      options={options}
      inputValue={inputValue}
      onInputChange={handleInputChange}
      noOptionsText=""
      ListboxProps={{
        children: (props) => {
          // 判断是否为初始空状态
          if (options.length === 0 && inputValue.trim() === '') {
            return (
              <Box sx={{ p: 2, textAlign: 'center', color: 'text.secondary' }}>
                <Typography variant="body2">
                  请输入关键词以加载相关选项
                </Typography>
              </Box>
            );
          }
          // 其他场景渲染默认选项或无结果提示
          return props.children;
        },
      }}
      renderInput={(params) => <TextField {...params} label="输入搜索" />}
    />
  );
}

关键说明 #

• 两种方法的核心都是通过输入值状态区分初始空状态和搜索后无结果状态，避免占位符与无结果提示混淆。
• 方法二更适合需要自定义占位符样式的场景，比如调整颜色、间距或添加辅助图标。

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