基于Material UI Autocomplete实现双属性同时搜索的相关问题

1、单个Autocomplete实现双字段搜索 #

• 答案是完全可以，不需要额外组件配合。getOptionLabel的核心作用是定义选项的展示文本，并非唯一的搜索匹配依据，你可以通过Autocomplete原生提供的filterOptions属性自定义匹配逻辑。
• 你可以用MUI内置的createFilterOptions工具快速生成自定义匹配规则，将两个字段都纳入匹配范围，参考代码如下：

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

const sample = [
  {hero: 'DARTH VADER', faction: 'EMPIRE'},
  {hero: 'LUKE SKYWALKER', faction: 'REBEL'},
  {hero: 'GREEDO', faction: 'BOUNTY HUNTER'},
];

// 自定义过滤规则，同时匹配hero和faction字段
const customFilter = createFilterOptions({
  matchFrom: 'any',
  stringify: (option) => `${option.hero} ${option.faction}`
});

export default function HeroSearch() {
  return (
    <Autocomplete
      options={sample}
      filterOptions={customFilter}
      getOptionLabel={(option) => `${option.hero}（所属阵营：${option.faction}）`}
      renderInput={(params) => <TextField {...params} label="搜索角色/阵营" variant="outlined" />}
    />
  );
}

• 上述代码中，stringify方法会将每个选项的两个字段拼接为字符串后和输入值匹配，输入任意字段的内容都能命中对应选项。

2、动态切换搜索匹配属性的实现 #

• 即使需要通过切换按钮调整搜索维度，也可以直接实现。你只需要引入一个状态变量控制匹配逻辑即可，参考代码如下：

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

const sample = [
  {hero: 'DARTH VADER', faction: 'EMPIRE'},
  {hero: 'LUKE SKYWALKER', faction: 'REBEL'},
  {hero: 'GREEDO', faction: 'BOUNTY HUNTER'},
];

export default function HeroSearch() {
  // 可选值：all（同时匹配两个字段）、hero（仅匹配角色名）、faction（仅匹配阵营）
  const [searchScope, setSearchScope] = useState('all');

  const customFilter = createFilterOptions({
    matchFrom: 'any',
    stringify: (option) => {
      if (searchScope === 'hero') return option.hero;
      if (searchScope === 'faction') return option.faction;
      return `${option.hero} ${option.faction}`;
    }
  });

  return (
    <div>
      <div style={{ marginBottom: 12 }}>
        <Button 
          variant={searchScope === 'hero' ? 'contained' : 'outlined'} 
          onClick={() => setSearchScope('hero')}
          style={{ marginRight: 8 }}
        >
          仅按角色搜索
        </Button>
        <Button 
          variant={searchScope === 'faction' ? 'contained' : 'outlined'} 
          onClick={() => setSearchScope('faction')}
          style={{ marginRight: 8 }}
        >
          仅按阵营搜索
        </Button>
        <Button 
          variant={searchScope === 'all' ? 'contained' : 'outlined'} 
          onClick={() => setSearchScope('all')}
        >
          全部字段搜索
        </Button>
      </div>
      <Autocomplete
        options={sample}
        filterOptions={customFilter}
        getOptionLabel={(option) => `${option.hero}（所属阵营：${option.faction}）`}
        renderInput={(params) => <TextField {...params} label="搜索角色/阵营" variant="outlined" />}
      />
    </div>
  );
}

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