Material UI Autocomplete：高亮选项需同步为输入框值

核心思路是手动接管高亮选项的状态控制，不让组件内部自动重置高亮，具体实现步骤如下：

• 自己维护一个highlightedIndex状态，用来记录当前高亮的选项索引
• 通过onKeyDown监听键盘箭头事件，手动更新highlightedIndex，同时同步输入框的值
• 将自定义的highlightedIndex传给Autocomplete组件的同名属性，强制组件保持高亮状态
• 当手动输入内容时，匹配对应的选项并同步更新高亮索引，保证输入内容和高亮项一致

代码示例 #

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

const options = [
  { label: '选项1', value: 'opt1' },
  { label: '选项2', value: 'opt2' },
  { label: '选项3', value: 'opt3' },
];

export default function Demo() {
  const [inputValue, setInputValue] = useState('');
  const [highlightedIndex, setHighlightedIndex] = useState(-1);

  const handleKeyDown = (event) => {
    let newIndex = highlightedIndex;
    if (event.key === 'ArrowDown') {
      event.preventDefault();
      newIndex = (newIndex + 1) % options.length;
      setHighlightedIndex(newIndex);
      setInputValue(options[newIndex].value);
    } else if (event.key === 'ArrowUp') {
      event.preventDefault();
      newIndex = newIndex <= 0 ? options.length - 1 : newIndex - 1;
      setHighlightedIndex(newIndex);
      setInputValue(options[newIndex].value);
    }
  };

  const handleInputChange = (event) => {
    const value = event.target.value;
    setInputValue(value);
    // 匹配输入内容对应的选项，更新高亮索引
    const matchIndex = options.findIndex(opt => 
      opt.value.includes(value) || opt.label.includes(value)
    );
    setHighlightedIndex(matchIndex === -1 ? highlightedIndex : matchIndex);
  };

  return (
    <Autocomplete
      options={options}
      includeInputInList={false}
      highlightedIndex={highlightedIndex}
      onKeyDown={handleKeyDown}
      renderInput={(params) => (
        <TextField
          {...params}
          label="示例"
          variant="outlined"
          value={inputValue}
          onChange={handleInputChange}
        />
      )}
    />
  );
}

补充说明 #

includeInputInList属性的作用是将输入框本身作为列表的一项展示，和保持选项高亮没有直接关联，所以对你的问题没有帮助。通过手动控制highlightedIndex，可以完全掌控高亮状态，避免输入框值更新时组件内部重置高亮。

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