MUI Autocomplete如何获取过滤选项数组？实现选项分隔线（除最后项）

方法一：通过renderOption结合索引判断 #

在Autocomplete组件的renderOption回调中，利用参数里的index，结合filteredOptions数组的长度判断是否渲染分隔线。filteredOptions是组件自动生成的过滤后选项数组，可直接从Autocomplete的props中获取：

<Autocomplete
  options={yourOptions}
  getOptionLabel={(option) => option.label}
  renderOption={(props, option, { index }) => (
    <>
      <li {...props}>
        {option.label}
      </li>
      {/* 仅非最后一项显示分隔线 */}
      {index !== filteredOptions.length - 1 && <Divider />}
    </>
  )}
  renderInput={(params) => <TextField {...params} label="输入关键词" />}
/>

方法二：使用useAutocomplete钩子 #

若需要更灵活的控制逻辑，可直接使用useAutocomplete钩子，它会返回当前的filteredOptions数组，遍历选项时直接通过索引判断：

import { useAutocomplete } from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import Divider from '@mui/material/Divider';

const YourComponent = () => {
  const {
    getRootProps,
    getInputProps,
    getListboxProps,
    getOptionProps,
    filteredOptions,
  } = useAutocomplete({
    options: yourOptions,
    getOptionLabel: (option) => option.label,
  });

  return (
    <div {...getRootProps()}>
      <TextField {...getInputProps()} label="输入关键词" />
      <ul {...getListboxProps()}>
        {filteredOptions.map((option, index) => (
          <li key={option.id} {...getOptionProps({ option })}>
            {option.label}
            {index !== filteredOptions.length - 1 && <Divider />}
          </li>
        ))}
      </ul>
    </div>
  );
};

方法三：CSS伪类实现（更简洁） #

如果不需要复杂逻辑，直接用CSS伪类给除最后一项外的选项添加底部边框，替代Divider组件，代码更简洁：

/* 给Autocomplete列表项加底部边框，最后一项除外 */
.MuiAutocomplete-listbox li:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  /* 调整间距优化视觉效果 */
  padding-bottom: 8px;
  margin-bottom: 8px;
}

内容的提问来源于stack exchange，提问作者coding-guy