如何自定义Material UI Autocomplete选中项的显示格式？

要实现选中后输入框内显示[name]换行加[type]的格式，你需要用到Autocomplete的renderValue属性（它支持返回JSX），同时修正getOptionLabel为返回字符串类型的值，具体步骤如下：

1. 修正getOptionLabel
   这个属性必须返回字符串，用于内部的搜索匹配逻辑，你可以直接返回合作伙伴名称，或者名称+类型的拼接字符串：

   getOptionLabel={(option) => `${option.name} (${option.type})`}
   

2. 添加renderValue属性
   用这个属性自定义选中项在输入框内的显示样式，返回你需要的多行JSX结构：

   renderValue={(selectedOption) => (
     <div style={{ lineHeight: 1.2 }}>
       <p style={{ margin: 0, fontWeight: 500 }}>{selectedOption.name}</p>
       <p style={{ margin: 0, fontSize: '0.875rem', color: '#666' }}>{selectedOption.type}</p>
     </div>
   )}
   

3. 补充renderInput配置
   AsyncAutocomplete需要通过renderInput来渲染输入框组件，这里使用Material UI的TextField：

   renderInput={(params) => (
     <TextField
       {...params}
       label="选择合作伙伴"
       variant="outlined"
       fullWidth
     />
   )}
   

把这些整合到你的代码中，最终版本如下：

<AsyncAutocomplete
  field={form.$("partnerId")}
  fullWidth
  fetchOptions={store.getPartners}
  // 修正为返回字符串
  getOptionLabel={(option) => `${option.name} (${option.type})`}
  // 自定义选中项的输入框显示
  renderValue={(selectedOption) => (
    <div style={{ lineHeight: 1.2 }}>
      <p style={{ margin: 0, fontWeight: 500 }}>{selectedOption.name}</p>
      <p style={{ margin: 0, fontSize: '0.875rem', color: '#666' }}>{selectedOption.type}</p>
    </div>
  )}
  isOptionEqualToValue={(option, value) => option.id === value.id}
  noOptionsText="Type to search"
  freeSolo={false}
  showOptionsOnOpen={false}
  renderOption={(props, partner) => (
    <PartnerOption key={partner.id} partner={partner} {...props} />
  )}
  // 补充renderInput
  renderInput={(params) => (
    <TextField
      {...params}
      label="选择合作伙伴"
      variant="outlined"
    />
  )}
/>

这样设置后，下拉选项保持你原来的PartnerOption组件样式，选中后输入框内会显示两行的名称+类型格式，完全符合你的需求。

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