React Material UI 自动完成

Question

当我使用自动完成功能时，它没有在建议的下拉列表中显示正确的项目列表，它显示的值与我的值匹配，其他值还有一些特定的字符串。例如，如果我输入“Lokesh”，它会建议 lokesh 和 neel，gulshan 也在建议中。

      <Autocomplete
      className={classes.searchUser}
        options={usersList?.users?.map((user: any) => user.display_name)}
        onChange={(event: any, newValue: any) => {
          setSearchValue(newValue);
        }}
        renderInput={(params: any) => (
          <TextField {...params} placeholder="Select User" />
        )}

        value={searchValue}
        sx={{ width: 300, borderColor: "red" }}
      />

Answer 1

按显示名称包含搜索值的用户过滤选项数组

options={usersList?.users?
  .filter((user: any) => user.display_name.includes(searchValue))
  .map((user: any) => user.display_name)}