如何自定义Material UI Autocomplete过滤器实现双向姓名匹配？

要同时支持顺序关键词匹配（如输入"bill"、"bill sim"）和颠倒姓名的任意关键词匹配（如输入"simmons b"、"simmons bill"），你需要基于createFilterOptions自定义过滤器，同时保留默认匹配逻辑并新增关键词拆分匹配逻辑，具体实现如下：

1. 自定义过滤函数 #

首先导入createFilterOptions，然后编写兼顾两种场景的过滤逻辑：

import { Autocomplete, createFilterOptions } from '@mui/material';

const customFilterOptions = createFilterOptions({
  // 基础配置，根据你的选项结构调整stringify
  stringify: (option) => option.name, // 假设选项是带name字段的对象，如{name: 'Bill Simmons'}
  filter: (options, state) => {
    const { inputValue } = state;
    if (!inputValue.trim()) return options;

    const trimmedInput = inputValue.trim().toLowerCase();
    // 拆分输入为多个关键词（按空格分割，过滤空字符串）
    const inputKeywords = trimmedInput.split(/\s+/).filter(word => word);

    // 保留默认的顺序匹配：输入完整字符串是选项文本的子串
    const defaultMatches = options.filter(option => {
      const optionText = state.stringify(option).toLowerCase();
      return optionText.includes(trimmedInput);
    });

    // 新增关键词任意顺序匹配：所有拆分后的关键词都能在选项文本中找到
    const keywordMatches = options.filter(option => {
      const optionText = state.stringify(option).toLowerCase();
      return inputKeywords.every(keyword => optionText.includes(keyword));
    });

    // 合并结果并去重，避免重复选项
    const uniqueMatches = [...new Set([...defaultMatches, ...keywordMatches])];

    // 保持默认的排序逻辑：优先匹配位置靠前的结果
    return uniqueMatches.sort((a, b) => {
      const aText = state.stringify(a).toLowerCase();
      const bText = state.stringify(b).toLowerCase();
      return aText.indexOf(trimmedInput) - bText.indexOf(trimmedInput);
    });
  },
});

2. 在Autocomplete中使用自定义过滤器 #

将自定义的customFilterOptions传入组件的filterOptions属性：

// 示例选项数组
const nameOptions = [
  { name: 'Bill Simmons' },
  { name: 'Alice Johnson' },
  { name: 'Bob Williams' },
];

<Autocomplete
  options={nameOptions}
  filterOptions={customFilterOptions}
  getOptionLabel={(option) => option.name}
  renderInput={(params) => <TextField {...params} label="搜索姓名" />}
/>

关键说明 #

• 如果你的选项是纯字符串而非对象，只需调整stringify和getOptionLabel为(option) => option即可
• 拆分关键词的规则可根据需求调整（比如支持逗号分隔，只需修改split(/[\s,]+/)）
• 若需要全词匹配而非子串匹配，可以将includes替换为正则匹配（注意转义特殊字符）

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