Material UI 自動完成的多行選項

Question

我正在嘗試進行自動完成，其中每個選項在第一行都有user的firstName和lastName ，在第二行有他們的id 。

這是我嘗試過的

<Autocomplete
        freeSolo
        disableClearable
        options={users}
        getOptionLabel={(option) => option.firstName + " " + option.lastName}
        renderOption={(option) => {
          return (
            <>
              <div>
                {option.firstName} {option.lastName}
              </div>
              <div>{option.id}</div>
            </>
          );
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Username or ID"
            // margin="normal"
            variant="outlined"
            value={name}
            onChange={handleChange}
            className={classes.input}
            InputProps={{
              ...params.InputProps,
              type: "search",
            }}
          />
        )}
      />

我正在從renderOption返回一個組件，但它不需要關注<div>或<br/>標簽。 它只是將所有東西放在一起

Answer 1

只需使用適當的 div 在下一行顯示。 單個外部 div 和一個嵌套 div 以在下一行顯示 id。

renderOption={(option) => {
      return (
        <>
          <div>
            {option.title} {option.title}
            <div>
              {option.title}
            </div>
          </div>
        </>
      );
    }}