React中Material UI Autocomplete组件实现搜索值与显示值分离方案

嘿，这个需求其实用Material UI的AutoComplete组件自带的自定义配置就能轻松实现，我来给你一步步拆解怎么做：

核心思路 #

AutoComplete组件允许我们通过两个关键属性，把搜索依据和显示内容拆分开：

• getOptionLabel：指定哪个字段作为搜索匹配的依据（这里就是你的label字段）
• renderOption：完全自定义下拉选项的显示内容（展示你想要的toBeDisplayed字段）

完整代码示例 #

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

export default function CustomAutoComplete() {
  // 你的自定义选项结构
  const options = [
    { label: 'The Godfather', toBeDisplayed: 1972 },
    { label: 'Pulp Fiction', toBeDisplayed: 1994 },
  ];
  const [selectedItem, setSelectedItem] = useState(null);

  return (
    <Autocomplete
      value={selectedItem}
      onChange={(e, newItem) => setSelectedItem(newItem)}
      options={options}
      // 告诉组件用label字段做搜索匹配
      getOptionLabel={(option) => option.label}
      // 自定义下拉选项的显示内容
      renderOption={(props, option) => (
        <li {...props}>
          {/* 这里可以自由组合显示内容，比如同时展示电影名和年份 */}
          {option.label} - 上映年份：{option.toBeDisplayed}
        </li>
      )}
      // 自定义输入框的显示（可选，如果选中后想显示年份而非label）
      renderInput={(params) => (
        <TextField
          {...params}
          label="搜索电影"
          variant="outlined"
          value={selectedItem ? selectedItem.toBeDisplayed : params.inputProps.value}
        />
      )}
    />
  );
}

关键属性解释 #

• getOptionLabel：这个函数是组件用来判断用户输入和选项是否匹配的依据，我们返回option.label，这样用户输入电影名称时，就能正确筛选对应的选项。
• renderOption：这个函数让你完全掌控下拉里每个选项的渲染，你可以在这里放任何React元素——不管是只显示年份，还是像示例里那样组合电影名和年份，都没问题。
• 受控状态（可选）：如果希望选中后输入框里显示的是年份而非原始label，就用useState维护选中项，然后在renderInput里修改输入框的显示值。

这样配置后，用户搜索时基于电影名称（label），下拉和输入框却能展示你想要的年份（toBeDisplayed），完美满足你的需求～

内容的提问来源于stack exchange，提问作者four-eyes