Material UI AsyncAutocomplete选中项自定义格式显示求助

要实现选中项分两行显示[name]和[type]的效果，核心是利用Autocomplete的renderValue属性自定义选中值的展示格式，同时修正getOptionLabel的用法（它仅用于搜索匹配逻辑，不能返回JSX），再配合renderInput调整输入框适配多行内容。

修改后的完整代码 #

<AsyncAutocomplete
  field={form.$("partnerId")}
  fullWidth
  fetchOptions={store.getPartners}
  // 修正：返回字符串用于搜索匹配逻辑
  getOptionLabel={(option) => option.name}
  isOptionEqualToValue={(option, value) => option.id === value.id}
  noOptionsText="Type to search"
  freeSolo={false}
  renderOption={(props, partner) => (
    <PartnerOption key={partner.id} partner={partner} {...props} />
  )}
  // 核心：自定义选中值的多行显示格式
  renderValue={(selectedOption) => (
    <div style={{ whiteSpace: "pre-line" }}>
      {selectedOption.name}
      <br />
      {selectedOption.type}
    </div>
  )}
  // 调整输入框适配多行内容
  renderInput={(params) => (
    <TextField
      {...params}
      label="选择合作方"
      multiline
      rows={2}
      variant="outlined"
      InputProps={{
        ...params.InputProps,
        // 保留原有的尾部装饰（下拉箭头等）
        endAdornment: (
          <React.Fragment>
            {params.InputProps.endAdornment}
          </React.Fragment>
        ),
      }}
    />
  )}
/>

关键说明 #

1. 修正getOptionLabel：该属性用于Autocomplete的搜索匹配逻辑，必须返回字符串，不能返回React元素，否则会导致搜索功能异常。这里我们返回option.name作为搜索匹配的依据。
2. 使用renderValue定制显示：这个属性专门负责定义选中值在输入框内的展示形式，通过<div>包裹两行内容，用<br/>或whiteSpace: "pre-line"实现换行，完美匹配你需要的格式。
3. 调整renderInput适配多行：通过TextField的multiline和rows={2}属性，让输入框支持多行显示，确保选中后的两行内容能完整展示，同时保留原有的下拉箭头等交互元素。

如果不需要输入框支持手动多行输入，也可以去掉multiline和rows，改为通过InputProps.style调整输入框内边距，让内容自然换行：

InputProps={{
  ...params.InputProps,
  style: { padding: "12px 14px" },
}}

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