如何为Material-UI Autocomplete组件添加次要搜索字段？

要让Autocomplete同时匹配label和secondary字段，且label匹配优先级更高，你需要自定义filterOptions属性来实现自定义筛选和排序逻辑：

自定义筛选排序函数 #

这个函数会给匹配label的选项打更高的分数，确保它们排在前面，同时过滤掉完全不匹配的选项：

const filterOptions = (options, { inputValue }) => {
  const lowerInput = inputValue.toLowerCase();
  return options
    .map(option => {
      // 判断label是否匹配输入
      const labelMatch = option.label.toLowerCase().includes(lowerInput);
      // 判断secondary是否匹配输入（兼容secondary不存在的情况）
      const secondaryMatch = option.secondary?.toLowerCase().includes(lowerInput);
      
      // 给匹配项打分：label匹配得2分，secondary匹配得1分，不匹配得0分
      let score = 0;
      if (labelMatch) score = 2;
      else if (secondaryMatch) score = 1;
      
      return { ...option, score };
    })
    // 过滤掉完全不匹配的选项
    .filter(item => item.score > 0)
    // 先按得分排序（高分在前），得分相同则按label字母排序
    .sort((a, b) => {
      if (b.score !== a.score) return b.score - a.score;
      const textA = a.label.toLowerCase();
      const textB = b.label.toLowerCase();
      return textA < textB ? -1 : textA > textB ? 1 : 0;
    });
};

修改后的完整组件代码 #

把自定义函数传入Autocomplete的filterOptions属性，同时移除原来options上的提前排序（逻辑已整合到filterOptions中）：

<Autocomplete
  disablePortal
  popupIcon={false}
  autoHighlight={true}
  limitTags={7}
  onChange={onChange}
  ListboxProps={{ style: { minHeight: "300px", maxHeight: "300px" } }}
  noOptionsText="No commands found"
  open
  options={options}
  filterOptions={filterOptions} // 加入自定义筛选逻辑
  autoComplete={true}
  renderInput={(params) => {
    return <TextField {...params} autoFocus={true} placeholder="Enter a command" />;
  }}
/>

逻辑说明 #

1. 不区分大小写匹配：把输入和选项字段都转成小写，避免大小写影响匹配结果
2. 优先级控制：通过得分机制让label匹配的选项始终排在secondary匹配的前面
3. 排序规则：得分高的选项优先展示，得分相同的保持原有的label字母排序逻辑
4. 容错处理：用可选链?.处理secondary字段不存在的情况，避免报错

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