如何使用JS排序将MUI Autocomplete选中选项置于顶部？

可以通过维护选中项状态+自定义filterOptions逻辑实现纯JS排序，无需CSS变通方案，具体步骤如下：

核心思路 #

filterOptions参数本身确实不直接传入选中状态，但我们可以通过useState手动维护当前选中的选项，再在过滤逻辑中结合这个状态调整选项顺序。

单选中场景代码示例 #

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

function YourAutocomplete() {
  // 维护选中项状态
  const [selectedOption, setSelectedOption] = useState(null);
  // 你的原始选项数组，示例结构
  const rawOptions = [
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Cherry', value: 'cherry' },
  ];

  const {
    getRootProps,
    getInputProps,
    getListboxProps,
    getOptionProps,
    options,
  } = useAutocomplete({
    options: rawOptions,
    onChange: (event, newValue) => {
      // 更新选中项状态
      setSelectedOption(newValue);
      // 这里可以保留你原本的onChange业务逻辑
    },
    filterOptions: (options, { inputValue }) => {
      // 第一步：完成基础过滤（按输入值筛选选项）
      const filteredOptions = options.filter(option =>
        option.label.toLowerCase().includes(inputValue.toLowerCase())
      );
      
      // 第二步：将选中项移到列表顶部
      if (selectedOption && filteredOptions.includes(selectedOption)) {
        return [
          selectedOption,
          ...filteredOptions.filter(opt => opt !== selectedOption)
        ];
      }
      
      return filteredOptions;
    },
  });

  // 渲染部分按MUI文档常规写法即可
  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <ul {...getListboxProps()}>
        {options.map((option, index) => (
          <li {...getOptionProps({ option, index })}>
            {option.label}
          </li>
        ))}
      </ul>
    </div>
  );
}

多选场景适配 #

如果是多选模式，只需把选中状态改成数组，并调整排序逻辑，将所有选中项前置：

const [selectedOptions, setSelectedOptions] = useState([]);

// ...
onChange: (event, newValue) => {
  setSelectedOptions(newValue);
},
filterOptions: (options, { inputValue }) => {
  const filteredOptions = options.filter(option =>
    option.label.toLowerCase().includes(inputValue.toLowerCase())
  );
  
  // 分离过滤结果中的选中项和未选中项
  const selectedInFilter = selectedOptions.filter(opt => filteredOptions.includes(opt));
  const unselectedInFilter = filteredOptions.filter(opt => !selectedOptions.includes(opt));
  
  return [...selectedInFilter, ...unselectedInFilter];
},

关键说明 #

• 选中状态的更新必须绑定到onChange回调，确保filterOptions能拿到最新的选中值
• 过滤逻辑可以根据你的业务需求自定义（比如模糊匹配的规则），排序步骤只需在过滤完成后调整数组顺序即可

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